React 中使用 CSS 的方式

发表于 更新于 分类于

style 内联样式

不需要组件从外部引入 css 文件，直接在组件中书写
在 react 中使用 style 对象的方式时。值必须用双引号包裹起来
只作用于当前组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import react, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C" // 驼峰法 minHeight: "200px",boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }

  render() {
    return (
      <>
        <div style={div1}>123</div>
        <div style="background-color:red;"></div>
      </>
    );
  }
}

export default Test;

[name].css

需要在当前组件中使用 import 引入 css 文件。
作用于当前组件及其所有后代组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.scss";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="link-name">123</div>
        <TestChidren>测试子组件的样式</TestChidren>
      </div>
    );
  }
}

export default Test;

[name].scss

引入 react 内部已经支持了后缀为 scss 的文件，所以只需要安装 node-sass 即可，因为有个 node-sass，scss 文件才能在 node 环境上编译成 css 文件
作用于当前组件及其所有后代组件

1
yarn add node-sass

然后编写 scss 文件

1
2
3
4
5
6
7
8
//index.scss
.App {
  background-color: #282c34;
  .header {
    min-height: 100vh;
    color: white;
  }
}

[name].module.css

将 css 文件作为一个模块引入
只作用于当前组件。不会影响当前组件的后代组件
完全将 css 和组件分离开，又不会影响其他组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.css";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className={moduleCss.linkName}>321321</div>
        <TestChild></TestChild>
      </div>
    );
  }
}

export default Test;

引入 [name].module.scss 文件

类似于 [name].module.css，区别是 [name].module.css 是引入 css module，这种引入 scss module
可以看做是 [name].module.css 在组件中使用 style 的升级版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.scss";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className={moduleCss.linkName}>321321</div>
        <TestChild></TestChild>
      </div>
    );
  }
}

export default Test;

radium

对于处理变量，媒体查询，伪类等是不方便的
使用 Radium 可以直接处理变量，媒体查询，伪类等，并且可以直接使用 js 中的数学，连接，正则表达式，条件，函数等
在 export 之前，必须用 Radium 包裹

需要先安装

1
yarn add radium

然后在 react 组件中直接引入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from "react";
import Radium from "radium";

let styles = {
  base: {
    color: "#fff",
    ":hover": {
      background: "#0074d9"
    }
  },
  primary: { background: "#0074D9" },
  warning: { background: "#FF4136" }
};

class Test extends Component {
  render() {
    return (
      <div>
        <button style={[styles.base, styles.primary]}>
          this is a primary button
        </button>
      </div>
    );
  }
}

export default Radium(Test);