网站建设价目表,用阿里云建设网站,群辉服务器建设的网站,广告公司岗位React 基础巩固(三十)——CSS编写方式 1.内联样式 Style 接受一个采用小驼峰命名属性的JS对象#xff0c;而不是CSS字符串 可以引用state中的状态来设置相关的样式 优点#xff1a;样式之间不会有冲突#xff1b;可以动态获取当前state中的状态 缺点#xff1a;需要使用…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/buttonh2 style{{ color: red, fontSize: ${titleSize}px }}标题文字/h2p style{{ color: blue }}内容文字/p/div);} }export default App; 2.常规样式 将样式编写到单独的文件再引入使用优点和往常的编写方式一致缺点样式之间相互层叠、相互影响 import React, { PureComponent } from react; import ./App.css; export class App extends PureComponent {render() {return (divh2 classNametitle标题内容/h2p classNamecontent内容文字/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 (divh2 className{appStyle.title}标题内容/h2p className{appStyle.content}内容文字/p/div);} }export default App; 4.CSS in JS CSS 由 JS生成而不是在外部文件中定义 优点通过JS为CSS赋予能力包括CSS预处理的样式嵌套、函数定义、逻辑复用、动态修改状态等。 缺点获取动态状态依然是一个不好处理的问题 采用 CSS in JS 的库有 styled - components推荐emotionGlamorous 编写 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 ./styleexport class App extends PureComponent {render() {return (AppWrapper titleColor{blue}div classNamesectionh2 classNametitle标题内容/h2p classNamecontent内容文字/p/div/AppWrapper);} }export default App;