【笔记】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/styles/style.css
1
2
3
* {
  color: red;
}
src/components/Component.jsx
1
2
3
4
5
6
import React from "react";
import "../styles/style.css";

class Component extends React.Component {}

export default Component;

局部作用域

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

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

export default Component;

CSS预处理器

Less

修改配置文件

通过CRACO配置Less

传送门

定义Less文件

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

引入Less文件

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

class Component extends React.Component {}

export default Component;

CSS-in-JS

styled-components

下载依赖

1
npm install -D styled-components

定义CSS样式

  • 通过标签模板字符串调用函数创建样式组件
  • 支持样式的嵌套
src/styles/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/components/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 "../styles/style";

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

export default Component;

传递参数

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

export const DivWrapper = styled.div`
  * {
    color: ${props => props.color};
  }
`;
src/components/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 "../styles/style";

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

export default Component;
接收参数时定义默认值
src/styles/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/styles/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/components/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 "../styles/style";

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

export default Component;

样式继承

src/styles/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)`
  * {}
`;

完成