css模块化

在cra脚手架中只要在父组件中引入了scss样式，那么这个样式就是全局样式 在react中用模块化来解决样式冲突的问题 在cra脚手架中，如果某个样式文件要开启模块化，只需要把样式文件命名为xx.module.css/xx.module.scss就可以了

import React,{FC,useState} from "react"
import Cmittem from "@/components1/cmittem"
import "./cmtlist.scss"
const Cmtlist:FC<{}>=(props)=>{
    const [commentList]=useState([
        { id: 1, user: '张三', content: '哈哈，沙发' },
        { id: 2, user: '李四', content: '哈哈，板凳' },
        { id: 3, user: '王五', content: '哈哈，凉席' },
        { id: 4, user: '赵六', content: '哈哈，砖头' },
        { id: 5, user: '田七', content: '哈哈，楼下山炮' }])
    return (
        <div>
             <h1>评论列表</h1>
            {
            commentList.map((item)=>{
                  return (
                      <Cmittem key={item.id} {...item}></Cmittem>
                  )
            })    
            }  
       </div>
    )
}
export default Cmtlist

在cmtlist.scss中定义一个h1，如果将它引入**cmtlist父组件，那么她所拥有的子组件的样式同样会生效。
css模块化的基本使用：
1**.在cra脚手架中，如果某个样式文件要开启模块化，只需要把样式文件命名为
xx.module.css/xx.module.scss就可以了

2.引入模块化文件样式

import cssObj from "./cmtlist.module.scss"

3.使用模块化样式

import React,{FC,useState} from "react"
import Cmittem from "@/components1/cmittem"
import cssObj from "./cmtlist.module.scss"
const Cmtlist:FC<{}>=(props)=>{
    return (
        <div>
             <h1 className={cssObj.title}>评论列表</h1>
       </div>
    )
}
export default Cmtlist

此时引入的css样式在cssObj中，因此在cssObj的样式中能够拿到那个类名样式title