在react项目中,直接引入样式文件会影响到全局样式,并非独立的。
解决方法有五种:
1、行内样式(react官网推荐)
class App extends React.Component {
// ...
render() {
return (
<div style={{ background: '#eee', width: '200px', height: '200px'}}>
<p style= {{color:'red', fontSize:'40px'}}>行内样式</p>
</div>
)
}
}
2、声明样式
class App extends React.Component {
//...
const style1={
background:'#eee',
width:'200px',
height:'200px'
}
const style2={
color:'red',
fontSize:'40px'
}
render() {
return (
<div style={style1}>
<p style= {style2}>行内样式</p>
</div>
)
}
}
3、开启css modules功能
相关教程:
作者:阮一峰
链接(css modules用法教程):http://www.ruanyifeng.com/blog/2016/06/css_modules.html
4、利用第三方工具Styled Components
具体使用在此不详述。
个人推荐第一种方法与第三种方法,即行内样式与css modules结合的方式。下面接着上一章的《webpack项目初始配置(一)》中的内容,配置webpack.config.js文件,因为新手爬坑过程中,很容易遇到开启了css modules功能之后,antd默认的样式就不生效的问题。
//css的处理,开启css modules功能,node_modules库中的antd样式除外
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use: "css-loader?modules&localIdentName=styles__[local]__[hash:base64:5]"
}),
},
//css的处理,node_modules库中的antd样式不开启css modules功能,但还是要编译的
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use: "css-loader"
})
},
//这里开启自己编写的less文件的css modules功能,除了node_modules库中的less
//也就是可以过滤掉antd库中的样式
{
test: /\.less$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader?modules&localIdentName=styles__[local]__[hash:base64:5]",
{
loader: 'less-loader', options: {modifyVars: theme}
}
]
})
},
//less的处理,需要加入node_modules里面的样式,并且不开启css modules功能
{
test: /\.less$/,
include: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader",
{
loader: 'less-loader', options: {modifyVars: theme}
}
]
})
},
关键代码说明:
//开启css modules之前的代码
use: "css-loader"
//开启css modules之后的代码
use: "css-loader?modules&localIdentName=styles__[local]__[hash:base64:5]
// ?modules 是开启css_modules
// localIdentName定义哈希字符串的格式
效果:
引入样式:
定义样式index.less:
网页编译后: