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;
插件)
