在组件内使用样式
- style样式语法:
style={ {color:'red',fontSize:'25px'} }
,如果值是字符串类型的需要用引号包裹,如果是纯数字的可以不用引号包裹 - 外部样式语法1:
const userstyle = {
header:{color:'red'},
content:{margin:'10px'}
}
export default function Cmtitem(props) {
return <div style={userstyle.header}>
<p style={userstyle.content}>组件样式</p>
</div>
}
使用外部单独的css样式文件
- 运行:
npm i style-loader css-loader -D
安装style-loader和css-loader插件 - 在webpack.config.js中找到module.exports = {},并输入一下代码配置
module:{
rules:[ // 第三方匹配规则
{test:/\.css$/,use:['style-loader','css-loader']} // 打包处理css样式表的第三方loader,从右向左来调用
]
}
// 1、第一中导入方式,导入的样式表是全局生效的,在子组件页中可使用
import cssobj from 'css文件路径'
// css文件中有类选择器.title
export default class Cmtlist extends React.Component {
render() {
return <div>
<h1 className="title">这是评论组件列表</h1>
{this.state.commentlist.map(item => <Cmtitem {...item}></Cmtitem>)}
</div>
}
}
- 解决css模块化的问题,需要在webpack.config.js中找到module.exports = {},并输入下列第一块区域代码配置;在组件内引用代码如第二块代码区域所示
module:{
rules:[ // 第三方匹配规则
// css-loader通过?追究参数,其中modules表示普通的css样式表启用模块化
{test:/\.css$/,use:['style-loader','css-loader?modules']} // 打包处理css样式表的第三方loader,从右向左来调用
]
}
// css文件中有类选择器.title
export default class Cmtlist extends React.Component {
render() {
return <div>
<h1 className={cssobj.title}>这是评论组件列表</h1>
{this.state.commentlist.map(item => <Cmtitem {...item}></Cmtitem>)}
</div>
}
}
- 为标签添加多个类名,下列代码是使h1标签有
.title
和.head
两个类名
<h1 className={csobj.title+" "+csobj.head}>这是评论组件列表</h1>
- 使某个类名不被模块化(类名由模块化转换为全局化),下列代码是使
.title
类名全局化(被:global()
包裹的类名是被全局化,而被:local()
包裹的类名是模块化)
:global(.title){
color:red;
}
- 使用css中引用图片的问题,路径:
background-image: url('/src/images/02.jpg')
从src这一层目录开始
使用第三方css模块文件(bootstrap等)
// 引用路径:直接从bootstrap文件夹开始,不需要从node_modules这一层目录开始(可以省略)
import bootcss from 'bootstrap/dist/css/bootstrap.css'
- 把自己的样式表定义为
.scss
文件,并对其启用模块化文件,去除自己的样式表的模块化(没必要模块化)
// 1、运行:npm i sass-loader node-sass -D 安装能够解析scss文件的loader
// 2、在webpack.config.js里面配置第三发模块匹配规则,module.exports = {}对象里面
module:{
rules:[
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
]
}
<button className="btn btn-primary">按钮</button>