当前位置: 首页 > news >正文

【前端知识】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;
http://www.lryc.cn/news/96967.html

相关文章:

  • Langchain 集成 FAISS
  • 科技与人元宇宙论坛跨界对话
  • JAVA-生成二维码图片
  • 【iOS】iOS持久化
  • 基于Javaweb+Vue3实现淘宝卖鞋前后端分离项目
  • bat一键批量、有序启动jar
  • centos7安装mysql数据库详细教程及常见问题解决
  • C++ STL sort函数的底层实现
  • ICP算法和优化问题详细公式推导
  • 【安全狗】linux免费服务器防护软件安全狗详细安装教程
  • 【iOS】自定义字体
  • WPF实战学习笔记06-设置待办事项界面
  • 推荐几个不错的免费配色工具网站
  • gitee page发布的静态网站,无法播放目录中的mp4视频
  • opencv-26 图像几何变换04- 重映射-函数 cv2.remap()
  • SkyWalking链路追踪中span全解
  • 【前端知识】React 基础巩固(三十一)——Redux的简介
  • 拦截Bean使用之前各个时机的Spring组件
  • RT thread 之 Nand flash 读写过程分析
  • 独立站最全出单营销指南,新手卖家赶紧学起来吧!
  • Git移除commit过的大文件
  • 再见 Spring Boot 1.X ,Spring Boot 2.X 走向舞台中心
  • Jsonp劫持
  • STM32CubeIDE(串口)
  • Python编程很简单,四步菜鸟到高手(文末送书5本)
  • Labview串口通信MSComm实现串口收发
  • 字节跳动 EB 级 Iceberg 数据湖的机器学习应用与优化
  • CentOS 安装Mysql8
  • 3-Linux实操
  • Yarn 集群的架构和工作原理