介绍
这篇文章给大家分享的是有关反应中怎么使用css的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>第一种:在组件中直接使用样式
不需要组件从外部引入css文件,直接在组件中书写。
import 反应,,{,Component },得到“react";
const div1 =, {
,宽度:“300 px",
,保证金:“30 px auto"
,写成backgroundColor:“# 44014 c",,//驼峰法
,minHeight:“200 px",
,boxSizing:“border-box"
};
class Test extends Component {
,构造函数(道具,上下文),{
超级才能(道具);
,}
,
,使(){
return 才能;
,,& lt; div 风格={div1}在123 & lt;/div>
,,& lt; div 比;
,,);
,}
}
export default 测试; 注意事项:
<李> 在正常的css中,比如background, box-sizing等属性,在风格对象div1中的属性中,必须转换成驼峰法,写成backgroundColor, boxSizing。而没有连字符的属性,如保证金,宽度等,则在风格对象中不变。
<李> 在正常的css中,css的值不需要用双引好(““),如
.App-header {
,background - color: # 282 c34;
100年,最低高度:vh;
,显示:flex;
,flex-direction:列;
,对齐项目:中心;
,justify-content:中心;
字体大小:大敌;钙(10 px +, 2 vmin);
,颜色:白色;
} 而在反应中使用风格对象的方式时。值必须用双引号包裹起来。
这种方式的反应样式,只作用于当前组件。
<强>第二种:在组件中引入[名字]。css文件
需要在当前组件开头使用进口引入css文件。
import 反应,,{,Component },得到“react";
import TestChidren 得到“。/TestChidren";
import “@/资产/css/index.scss";
class Test extends Component {
,构造函数(道具,上下文),{
超级才能(道具);
,}
,
,使(){
return 才能;
,,& lt; div>
,,,& lt; div className=發ink-name"在123 & lt;/div>
,,,& lt; TestChidren>测试子组件的样式& lt;/TestChidren>
,,& lt;/div>
,,);
,}
}
export default 测试; 这种方式引入的css样式,会作用于当前组件及其所有后代组件。
<强>第三种:3,在组件中引入[名字]。scss文件
引入内反应部已经支持了后缀为scss的文件,所以只需要安装node-sass即可,因为有个node-sass, scss文件才能在节点环境上编译成css文件。
祝辞yarn add node-sass 然后编写scss文件
//index.scss
.App {
,background - color: # 282 c34;
,.header {
,,最低高度:100 vh;
,,颜色:白色;
,}
} 关于如何详细的使用sass,请查看sass官网
这种方式引入的css样式,同样会作用于当前组件及其所有后代组件。
<强>第四种:在组件中引入[名字].module。css文件
将css文件作为一个模块引入,这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件。
import 反应,,{,Component },得到“react";
import TestChild 得到“。/TestChild";
import moduleCss 得到“。/test.module.css";
class Test extends Component {
,构造函数(道具,上下文),{
超级才能(道具);
}大敌;
,
,使(){
return 才能;
,,& lt; div>
,,,& lt; div className={moduleCss.linkName}在321321 & lt;/div>
,,,& lt; TestChild> & lt;/TestChild>
,,& lt;/div>
,,);
,}
}
export default 测试; 这种方式可以看做是前面第一种在组件中使用风格的升级版。完全将css和组件分离开,又不会影响其他组件。
<强>第五种:在组件中引入[名字].module。scss文件
类似于第四种,区别是第四种引入css模块,而这种是引入scss模块而已。
import 反应,,{,Component },得到“react";
import TestChild 得到“。/TestChild";
import moduleCss 得到“。/test.module.scss";
class Test extends Component {
,构造函数(道具,上下文),{
超级才能(道具);
}大敌;
,
,使(){
return 才能;
,,& lt; div>
,,,& lt; div className={moduleCss.linkName}在321321 & lt;/div>
,,,& lt; TestChild> & lt;/TestChild>
,,& lt;/div>
,,);
,}
}
export default 测试;
