【笔记】React的CSS样式

发表于 更新于 分类于 阅读次数：

前言

React的CSS样式学习笔记

定义内联样式

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";

class Component extends React.Component {
  render() {
    return (
      <>
        <div style={{ color: "red" }}>
      </>
    );
  }
}

export default Component;

定义外部样式

全局作用域

src/style.css
1
2
3
* {
  color: red;
}
src/Component.jsx
1
2
3
4
5
6
import React from "react";
import "./style.css";

class Component extends React.Component {}

export default Component;

局部作用域

src/style.module.css
1
2
3
* {
  color: red;
}
src/Component.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
import style from "./style.module.css";

class Component extends React.Component {
  render() {
    return (
      <>
        <div className={style.container}></div>
      </>
    );
  }
}

export default Component;

CSS预处理器

通过craco配置CSS预处理

下载依赖

1
npm install -D @craco/craco

创建craco配置文件

<project_name>/craco.config.js
1
module.exports = {}

修改package.json配置文件

<project_name>/package.json
1
2
3
4
5
6
7
{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  }
}

Less

下载依赖

1
npm install -D craco-less

修改craco配置文件

<project_name>/craco.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}

定义Less文件

src/style.less
1
2
3
* {
  color: red;
}

引入Less文件

src/Component.jsx
1
2
3
4
5
6
import React from "react";
import "./style.less";

class Component extends React.Component {}

export default Component;

CSS-in-JS

styled-components

下载依赖

1
npm install -D styled-components

定义CSS样式

  • 通过标签模板字符串调用函数创建样式组件
  • 支持样式的嵌套
src/style.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import styled from "styled-components";

export const DivWrapper = styled.div`
  * {
    color: red;
  }

  .className {
    .className {
      color: red;
    }
  }
`;
src/Component.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import { DivWrapper } from "./style";

class Component extends React.Component {
  render() {
    return (
      <>
        <DivWrapper>
          <div></div>
        </DivWrapper>
      </>
    );
  }
}

export default Component;

传递参数

src/style.js
1
2
3
4
5
6
7
import styled from "styled-components";

export const DivWrapper = styled.div`
  * {
    color: ${props => props.color};
  }
`;
src/Component.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import { DivWrapper } from "./style";

class Component extends React.Component {
  render() {
    return (
      <>
        <DivWrapper color="red">
          <div></div>
        </DivWrapper>
      </>
    );
  }
}

export default Component;
接收参数时定义默认值
src/style.js
1
2
3
4
5
6
7
8
9
10
11
import styled from "styled-components";

export const DivWrapper = styled.div.attrs(props => {
  return {
    color: props.color || "red"
  }
})`
  * {
    color: ${props => props.color};
  }
`;

主题样式

  • 通过<ThemeProvider></ThemeProvider>组件包裹根组件，使得根组件内任意子组件的样式组件都可以访问<ThemeProvider></ThemeProvider>组件传入的theme参数
src/style.js
1
2
3
4
5
6
7
import styled from "styled-components";

export const DivWrapper = styled.div`
  * {
    color: ${props => props.theme.color};
  }
`;
src/Component.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import { ThemeProvider } from "./style";

class Component extends React.Component {
  render() {
    return (
      <>
        <ThemeProvider theme={{ color: "red" }}>
          <App />
        </ThemeProvider>
      </>
    );
  }
}

export default Component;

样式继承

src/style.js
1
2
3
4
5
6
7
8
9
10
11
import styled from "styled-components";

export const DivWrapperFather = styled.div`
  * {
    color: red;
  }
`;

export const DivWrapperSon = styled(DivWrapperFather)`
  * {}
`;

完成