介绍
这篇文章主要介绍了反应中如何使用css,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
第一种:在组件中直接使用样式
不需要组件从外部引入css文件,直接在组件中书写。
进口反应,从“{组件};react";
const div1={
宽度:“300 px"
保证金:“30 px auto"
写成backgroundColor:“# 44014 c"//驼峰法
minHeight:“200 px"
boxSizing:“border-box"
}；
类测试扩展组件{
构造函数(道具、上下文){
超级(道具);
｝
呈现(){
回报(
& lt; div>
& lt; div风格={div1}在123 & lt;/div>
& lt; div风格={{写成backgroundColor:“red"}}祝辞
& lt;/div>
)；
｝
｝
出口默认测试; 注意事项:
1。在正常的css中,比如background, box-sizing等属性,在风格对象p1中的属性中,必须转换成驼峰法,写成backgroundColor, boxSizing。而没有连字符的属性,如保证金,宽度等,则在风格对象中不变。
2。在正常的css中,css的值不需要用双引好(““),如
。App-header {
background - color: # 282 c34;
最小高度:100 vh;
显示:flex;
flex-direction:列;
对齐项目:中心;
justify-content:中心;
字体大小:钙(10 px + 2 vmin);
颜色:白色;
} 3。不能直接使用字符串写风格,会报错
& lt; div风格=癰ackground: red"在 
而在反应中使用风格对象的方式时。值必须用双引号包裹起来。
这种方式的反应样式,只作用于当前组件。
第二种:在组件中引入[名字]。css文件
需要在当前组件开头使用进口引入css文件。
进口反应,从“{组件};react";
从“进口TestChidren。/TestChidren";
导入“@/资产/css/index.css";
类测试扩展组件{
构造函数(道具、上下文){
超级(道具);
｝
呈现(){
回报(
& lt; div>
& lt; div className=發ink-name"祝辞123 & lt;/div>
& lt; TestChidren>测试子组件的样式& lt;/TestChidren>
& lt;/div>
)；
｝
｝
出口默认测试; 这种方式引入的css样式,会作用于当前组件及其所有后代组件。
<强>第三种:3,在组件中引入[名字]。scss文件
反应内部已经支持了后缀为scss的文件,所以只需要安装node-sass即可,因为有了node-sass, scss文件才能在节点环境上编译成css文件。
在纱添加node-sass 然后编写scss文件
//index.scss
.App {
background - color: # 282 c34;
.header {
最小高度:100 vh;
颜色:白色;
｝
} 关于如何详细的使用sass,请查看sass官网
这种方式引入的css样式,同样会作用于<强>当前组件及其所有后代组件。
<强>第四种:在组件中引入[名字].module。css文件
将css文件作为一个模块引入,这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件。
进口反应,从“{组件};react";
从“进口TestChild。/TestChild";
从“进口moduleCss。/test.module.css";
类测试扩展组件{
构造函数(道具、上下文){
超级(道具);
｝
呈现(){
回报(
& lt; div>
& lt; div className={moduleCss.linkName}在321321 & lt;/div>
& lt; TestChild> & lt;/TestChild>
& lt;/div>
)；
｝
｝
出口默认测试; 这种方式可以看做是前面第一种在组件中使用风格的升级版。完全将css和组件分离开,又不会影响其他组件。
<强>第五种:在组件中引入[名字].module。scss文件
类似于第四种,区别是第四种引入css模块,而这种是引入scss模块而已。
进口反应,从“{组件};react";
从“进口TestChild。/TestChild";
从“进口moduleCss。/test.module.scss";
类测试扩展组件{
构造函数(道具、上下文){
超级(道具);
｝
呈现(){
回报(
& lt; div>
& lt; div className={moduleCss.linkName}在321321 & lt;/div>
& lt; TestChild> & lt;/TestChild>
& lt;/div>
)；
｝
｝
出口默认测试;
