1、使用React的行内样式设置样式
(1)在JSX文件中定义样式变量,和定义普通的对象变量一样
let backAndTextColor = { backgroundColor:'blue', color:'#ff671b', fontSize:40 };
(2)JSX的调用
<div style={backAndTextColor}>行内样式测试</div>
也可以直接写到JSX中,如下:
<div style={{backgroundColor:'blue',color:'#ff671b',fontSize:40}}>行内样式测试</div>
2、外部导入css样式
(1)定义一个CSS文件style.css,和普通CSS一样定义class选择器
.sty1{//和普通CSS一样定义class选择器 background-color: red; color: white; font-size: 40px; }
(2)在JSX中导入编写好的CSS文件
import './style.css';
(3)JSX的调用
<div className="sty1">看背景颜色和文字颜色</div>