【前端知识】React 基础巩固(三十)——CSS编写方式

React 基础巩固(三十)——CSS编写方式

1.内联样式

• Style 接受一个采用小驼峰命名属性的JS对象，而不是CSS字符串

• 可以引用state中的状态来设置相关的样式

• 优点：样式之间不会有冲突；可以动态获取当前state中的状态

• 缺点：需要使用驼峰标识；某些样式没有提示；大量样式下，代码混乱；某些样式无法编写（伪类/伪元素…）

  import React, { PureComponent } from "react";
  
  export class App extends PureComponent {
    constructor() {
      super();
  
      this.state = {
        titleSize: 30,
      };
    }
  
    addTitleSize() {
      this.setState({
        titleSize: this.state.titleSize + 1,
      });
    }
  
    render() {
      const { titleSize } = this.state;
      return (
        <div>
          {/* 内联样式 */}
          <button onClick={(e) => this.addTitleSize()}>add titleSize</button>
          <h2 style={{ color: "red", fontSize: `${titleSize}px` }}>标题文字</h2>
          <p style={{ color: "blue" }}>内容文字</p>
        </div>
      );
    }
  }
  
  export default App;
  
  

2.常规样式

• 将样式编写到单独的文件，再引入使用
• 优点：和往常的编写方式一致
• 缺点：样式之间相互层叠、相互影响

import React, { PureComponent } from "react";
import "./App.css";
export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className="title">标题内容</h2>
        <p className="content">内容文字</p>
      </div>
    );
  }
}

export default App;

3.css modules

• React脚手架内置 css modules 的配置，.css/.less/.scss等样式文件都需要修改成 .modules.css/.modules.less/.modules.scss之后进行引用
• 优点：解决了局部作用域的问题
• 缺点：引用的类名不能使用连接符；所有的className都必须使用{style.className}的形式来编写；不便于动态修改样式

import React, { PureComponent } from "react";
import appStyle from "./App.module.css";
export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={appStyle.title}>标题内容</h2>
        <p className={appStyle.content}>内容文字</p>
      </div>
    );
  }
}

export default App;

4.CSS in JS

• CSS 由 JS生成而不是在外部文件中定义

• 优点：通过JS为CSS赋予能力，包括：CSS预处理的样式嵌套、函数定义、逻辑复用、动态修改状态等。

• 缺点：获取动态状态依然是一个不好处理的问题

• 采用 CSS in JS 的库有：

  • styled - components（推荐）
  • emotion
  • Glamorous

• 编写 style.js 文件

import styled from "styled-components";

export const AppWrapper = styled.div.attrs((props) => {
  return {
    titleColor: props.titleColor || "green",
  };
})`
  .section {
    background-color: red;
  }

  .title {
    color: ${(props) => props.titleColor};
  }

  .content {
    color: green;
  }
`;

• 使用 styled-components

安装styled-components

npm install styled-components

引入styled-components

import React, { PureComponent } from "react";
import {AppWrapper} from './style'

export class App extends PureComponent {
  render() {
    return (
      <AppWrapper titleColor={'blue'}>
        <div className="section">
          <h2 className="title">标题内容</h2>
          <p className="content">内容文字</p>
        </div>
      </AppWrapper>
    );
  }
}

export default App;