react 可以引入 CSS; 但注意, 在 React 中, 如果直接按下面的方式写内联样式会直接报错, 因为 JSX 语法不支持.
<div style="color:red"> 测试数据 </div> // 报错
相对于 html 中引用 CSS 的三种方法, react 中也有三种方法, 一一相对:
1, 行内样式: 直接在组件内部定义
- <div style={{width:'20px',height:'30px'}}>
- First Way!
- </div>
2, 声明样式: 在 render 函数中先声明, 再引用
- render() {
- let mystyle = {
- width:'20px',
- height:'30px'
- }
- return(
- <div style={mystyle}>
- Second Way!
- </div>
- );
- }
3, 引入样式: 引入外部的 CSS 文件, 外部的 CSS 文件就是普通的 CSS, 在组件 JS 中的 import 语句后面使用如下语句.
requre('./mystyle.css');
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17002.html