React中行内样式的写法:
在jsx中,如果想写行内样式了,不能为 style设置字符串的值 而是应该这么写:
<div style = { {color :‘red’,boxShadow:'0 0 10px #ccc',fontSize:'14px' } }></div>
在行内样式中, 如果是数值类型的样式,则可以不用引号包裹,如果是 字符串类型的样式值,必须使用引号包裹.。
React中用类名className的方式书写 :
用类名的方式,不在用class因为是关键字;要使用className
直接导入css样式表,默认是在全局上,整个项目都生效的
疑问:React中,有没有类似于scoped这样的指令呢?
答案: 没有;因为在 React中,根本就没有指令的概念
【【React中如何才能像vue (scoped)那种有自己的样式模块化呢?
1:打开webpack 在css-loader后加上?modules 代表启用模块化
{test:/\.css$/,use:['style-loader','css-loader?modules']}, //打包处理 css样式表的第三方loader
大家可以在css-loader之后,通过? 追加参数 , 其中,有个固定的参数,叫做modules,表示为普通的css样式,启用模块化。
2:创建css文件,并导入需要用到样式的文件中
a.css
.title {
color:red;
text-align: center;
font-weight: 200;
}
a.jsx 导入css文件
import classObj from '@/css/Movie.css' **启用模块化之后就可以导入一个对象, 用这个对象去点我们的类名**
console.log(classObj); //打印出来的是一个对象
打印结果: title: "_1p3ibrao79RsB5kh0by7YB"
3:页面上进行调用类名
<h1 className = {classObj.title} >这是评论列表组件</h1>
注意:css模块化,只针对 类选择器 和 ID选择器生效,不会将标签选择器模块化
:global()和 :local ( )
:global(.test){
// 被:global()包裹起来的类名,不会被模块化,而是会全局生效
font-style : italic
}
被:local()包裹起来的类名和id选择器会被模块化 【不常用】
在项目中启用模块化并同时使用 bootstrap
在React中
我们引用第三方库(比如bootstrap)我们直接用它的类名就会报错,因为我们给css启用了模块化,用类名的话只能通过对象点出来的形式
例如这串代码
<button className = { [bootcss.btn , bootcss['btn-primary']].join(' ')}>按钮</button>
这种太麻烦了!!!
想直接用 <button className = “btn btn-primary”></button>
这种形式
所以,可以自己规定: 第三方样式表,都是以 .css结尾, 这样我们就不用为普通的css启用模块化了
自己的样式表:要以.scss或less结尾,只为,sass和less做模块化。
1: 把自己的css样式表,定义为.scss文件
2: 第三方的(bootstrap)样式表,还是以.css结尾
3: 我们只需要为自己的.scss文件,启用模块化即可。
4: 运行cnpm i sass-loader node-sass - D 安装能够解析scss文件的loader
module: { // 所有第三方 模块的配置规则
rules: [ // 第三方匹配规则
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
{test:/\.css$/,use:['style-loader','css-loader']}, //打包处理 css样式表的第三方loader
{test:/\.ttf|woff|woff2|eot|svg$/ , use:'url-loader'},
**{test:/\.scss$/,use:['style-loader','css-loader?modules&localIndentName=[path][name]-[local]-[hash:5]','sass-loader']}** //打包处理scss文件的loader
]
},
配完之后页面上直接可以用
css不在启用模块化了,bootcss这个对象此时就是个空的{}
所以直接导入我们的bootstrap的css样式