React中使用样式的四种方式 模块化样式 classNames css-in-js
前言
React 使用 JSX 来替代常规的 JavaScript。
- JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
- JSX 运用于 React 架构中，其格式比较像是模版语言，但事实上完全是在 JavaScript 内部实现的。
- 元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。
- 与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
- 要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化，使用 JSX 编写模板更加简单快速。
有关JSX的资料请参考：
https://baike.baidu.com/item/JSX/1686693?fr=aladdin
https://react.docschina.org/docs/introducing-jsx.html
React中样式的使用方式有以下几种：
- 行内样式和类样式
- 模块化样式
- 动态切换样式
- CSS-in-JS
1. 行内样式和类样式
- 使用行内样式时，属性 style={} 里面要传一个对象。可以直接写入一个对象，也可以写入一个已经声明好的对象。
- 使用样式文件时，用 import 导入样式文件，在标签上添加 className 属性，由于 JSX 就是 JavaScript，class 需要写成 className ，class 是 JavaScript 的保留字。
- 从性能角度来说，CSS 的 class 通常比行内样式更好。
import React, { Component } from 'react';
import "./common.css";
class Box extends Component {
constructor(){
super();
this.state ={
styleObj:{
fontSize:'50px'
}
}
}
render() {
return (
// 使用class,container是在common.css中声明的一个样式
<div className="container">
{/* 行内样式 */}
<h1 style={{'fontSize':'20px'}}>标题1</h1>
<h1 style={this.state.styleObj}>标题2</h1>
</div>
);
}
}
export default Box;
2. 模块化样式
新建后缀名为.module.css的样式文件，例如新建common.module.css的样式文件内容如下：
.success{color:green;font-size:20px;}
.error{color:red;font-size:20px;}
使用的时候，通过 import 导入样式文件，通过文件名[属性]来使用这个样式。
import React, { Component } from 'react';
import common from "./common.module.css"
class Box extends Component {
render() {
return (
<div>
<span className={common.error}>异常信息</span>
</div>
);
}
}
export default Box;
3. 动态切换样式
通过 classNames 插件来完成，根据不同的条件判断，应用不同的样式。
在终端执行下面的命令，安装 classNames
yarn add classnames -S
使用的时候：
1、通过 import 先导入classNames 插件；
2、使用 classNames.bind() 方法建立绑定关系；
3、声明样式对象，属性名为样式名称，值为boolean，true表示应该该样式；false表示不应用该样式；
4、在标签上添加 className 属性，值为该样式对象；
具体使用方式如下：
/* common.css 文件内容 */
.success{color:green;font-size:20px;}
.error{color:red;font-size:20px;}
react 代码：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames/bind';
import styles from './common.css'
let cx = classNames.bind(styles); //建立绑定关系
class Box extends Component {
render() {
let names = cx({ //声明样式对象
success:true,
error:this.props.error //从标签属性中读取传过来的值
})
return (
<div>
<h1 className={names}>这是提示信息</h1>
</div>
);
}
}
ReactDOM.render(
<Box error={false} />,
document.getElementById('root')
);
使用这种方式的好处就是可以动态切换DOM元素中应用的样式。
4. CSS-in-JS
在 react 里一切皆组件，所以能不能把 clss 也定义成组件模块呢？当然是可以的。styled-components是针对 React 写的一套 css-in-js 框架，简单来讲就是可以在 js 中写 css。
“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。
注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度；如果存在疑惑，比较好的方式是和平时一样，在一个单独的 *.css 文件定义你的样式，并且通过 className 指定它们。
我们来看如何使用 styled-components 插件。
在终端中执行下面的命令，安装 styled-components 插件
yarn add styled-components -S
新建一个样式文件，注意这个样式文件的后缀是 .js
1、通过 import 导入 styled-components；
2、使用 styled 定义样式内容，可以通过属性传参，也可以使用 sass 语法；
//common.js 样式文件
import styled from 'styled-components'
//这种定义的写法类似于
const Container = styled.div`
width:500px;
height:500px;
background:${(props)=>props.color};
font-size:30px;
h1 {
font-size:50px;
}
`
export {
Container
}
在react中使用的时候：
import React, { Component } from 'react';
import {Container} from './common'
class Box extends Component {
render() {
return (
<Container color="red">
<h1> hello world</h1>
这里是内容
</Container>
);
}
}
ReactDOM.render(
<Box />,
document.getElementById('root')
);
最终渲染到页面的结果如下：
这种方式的优点是可以动态传递参数。
总结
- 行内样式和类样式，通常不推荐将 style 属性作为设置元素样式的主要方式。在多数情况下，应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。
- 模块化样式，样式文件的后缀为.module.css，使用的时候以对象的形式来调用样式。
- 动态切换样式，通过 classNames 插件来完成，通过对样式属性设置 true 或者 false，来设置是否将该样式应用到DOM对象中。
- CSS-in-JS，在js文件中写css，样式文件的后缀名为 .js，这种方式最大的优点就是可以传递参数。