react的css样式

1、使用React的行内样式设置样式

(1)在JSX文件中定义样式变量,和定义普通的对象变量一样

let backAndTextColor = {
    backgroundColor:'blue',
    color:'#ff671b',
    fontSize:40
};


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

(2)JSX的调用

<div style={backAndTextColor}>行内样式测试</div>

  

 

  
1
 

也可以直接写到JSX中,如下:

<div style={{backgroundColor:'blue',color:'#ff671b',fontSize:40}}>行内样式测试</div>

  

 

  
1
 

2、外部导入css样式

（1）定义一个CSS文件style.css,和普通CSS一样定义class选择器

.sty1{//和普通CSS一样定义class选择器
    background-color: red;
    color: white;
    font-size: 40px;
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

(2)在JSX中导入编写好的CSS文件

import './style.css';

  

 

  
1
 

(3)JSX的调用

<div className="sty1">看背景颜色和文字颜色</div>

  

 

  
1
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/107342818