React.js--16为普通css样式通过modules参数启用模块化

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1.在webpack.config.js文件中css-loader之后追加参数，通过？参数

'css-loader?modules’这里面的固定参数modules表示为普通的css样式表启用模块化

2.分别写两个css文件对应组件，CmtList.css和CmtItem.css

CmtList.css内的代码：

.title{
    color: red;
    text-align: center;
}
/*css模块化只针对类选择器和id选择器生效
不对将标签选择器模块化
*/

CmtItem.css内的代码：

.title{
    font-size: 20px;
}
content{
    font-size: 13px;
}
.cmtbox{
    border:1px black;
    margin:  10px;
    padding: 10px;
    box-shadow:  0 0 10px black;
}

3.在CmtList2.jsx和CmtItem2.jsx文件中导入各自对应的css样式文件并且使用

CmtList2.jsx文件中的代码：

import React from 'react'
//导入列表组件需要的样式表,直接导入的css样式表默认的是在全局整个项目都生效
//怎么解决样式表冲突的问题，可以为
import cssobj from '@/css/CmtList.css'
console.log(cssobj);
//导入评论项的子组件
import CmtItem from '@/Components/CmtItem2'
//创建一个父组件
export default class CmtList extends React.Component{
    constructor(){
        super();
        this.state = {
            CommentList:[//评论列表数据
                {id:1,user:'安琪拉',conent:'魔法为我而存在'},
                {id:2,user:'后羿',conent:'发光的一个就够了'},
                {id:3,user:'刘禅',conent:'一号机开启暴走状态'},
                {id:4,user:'鲁班',conent:'有时候肌肉比头脑更厉害'},
                {id:5,user:'吕布',conent:'我的貂蝉在哪里'}
            ]
        }
    }
render(){
    return<div>
        <h1 className={cssobj.title}>这是评论列表组件</h1>
       {this.state.CommentList.map(item =><CmtItem {...item} key = {item.id}></CmtItem>)}
    </div>}
}



CmtItem2.jsx中的代码：

import React from 'react'
import cssobj from '@/css/CmtItem.css'
//使用function构造函数，定义普通的无状态组件
export default function CmtItem(props) {
    return <div className={cssobj.cmtbox} >
        <h1 className={cssobj.title}>评论人:{props.user}</h1>
        <p className={cssobj.conent}>评论内容:{props.conent}</p>
    </div>
}


4.从新运行npm run dev

结果为：

以上是 React.js--16为普通css样式通过modules参数启用模块化 的全部内容， 来源链接： utcz.com/z/383547.html

回到顶部