react【四】css

1、css

1.1 react和vue css的对比

1.2 内联样式

1.3 普通的css

• 缺点：css文件是全局样式 会影响到其他的同名的样式，进行样式的堆叠

1.4 css modules

1.5 在react中使用less

• 1、在根文件中创建 craco.config.js文件夹
• • 安装carco npm i @craco/craco
• • 设置内容

const CracoLessPlugin = require("craco-less");

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• • 下载装饰器 npm i @babel/plugin-proposal-decorators -S
• 2、修改package.json文件

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

1
2
3
4
5
6
7

报错可能是版本问题更新一下版本 npm update

1.6 CSS in JS

1.6.1 模板字符串的基本使用

// 1.模板字符串的基本使用
const str = `my name is ${name}, age is ${age}`;
console.log(str);

// 2.标签模板字符串的使用
function foo(...args) {
  console.log(args);
}

foo(name, age); // (2) ['why', 18]

// 这也是一种调用方法
foo``; // [['']]

foo`my name is ${name}, age is ${age}`;

// 得到的结果变量是默认为空
// [['my name is','','age is',''],'why',18]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1.6.2 styled-components的基本使用

• npm install styled-components
  下载vscode插件
  
  

1.6.3 接受传参

1.6.4 使用变量

import React, { Component } from "react";
import { AppWrapper, SectionWrapper } from "./style";

class App extends Component {
  constructor() {
    super();
    this.state = {
      size: 30,
      color: "yellow",
    };
  }

  render() {
    const { size, color } = this.state;

    return (
      <AppWrapper>
        <div className="footer">我是footer</div>

        <SectionWrapper fontSize={size} color={color}>
          <div className="title">我是标题</div>
          <p className="content">我是内容, 哈哈哈</p>
          <button onClick={(e) => this.setState({ color: "skyblue" })}>
            修改颜色
          </button>
        </SectionWrapper>
      </AppWrapper>
    );
  }
}

export default App;

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
28
29
30
31
32
33

import styled from "styled-components";
import * as vars from "./style/variables";

// 1、基本使用
// export const AppWrapper = styled.div``

export const AppWrapper = styled.div`
  /* 使用AppWrapper作为标签 就会继承样式 */
  .footer {
    background-color: black;
  }
`;

// 2、将子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props作为参数 也可设置默认值attrs

export const SectionWrapper = styled.div.attrs((props) => ({
  // 默认用传进来的参数 没有的话就使用20
  textSize: props.fontSize || 20,
  textColor: props.color || vars.primaryColor,
}))`
  /* section不需要写类名 */

  color: ${(props) => props.textColor};
  border: 1px solid ${vars.primaryColor};

  .title {
    /* 上面使用了新的变量来处理fontSize 所以需要使用textSize */
    font-size: ${(props) => props.textSize}px;
    color: red;
  }

  .content {
    &:hover {
      color: yellow;
    }
  }
`;

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
28
29
30
31
32
33
34
35
36
37
38
39

1.6.5 继承样式 避免代码冗余

1.6.6 设置主题色

1.7 React中添加class

• cnpm install classnames
•