【前端知识】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;