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'

//这种定义的写法类似于 <div class="Container"></div>
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，这种方式最大的优点就是可以传递参数。