0401react中使用css-react-css-仿低代码平台项目

文章目录

    • 1、普通方式-内联使用css
    • 2、引入css文件
      • 2.1、示例
      • 2.2、classnames
    • 3、内联css与引入css文件对比
      • 3.1、内联css
      • 3.2、 外部 CSS 文件（External CSS）
    • 4、css module
    • 5、sass
    • 6、classnames组合scss modules
    • 7、css-in-js
      • 7.1、CSS-in-JS 的核心特性
      • 7.2、主流 CSS-in-JS 库对比
      • 7.3、在 React 中的使用示例
        • 7.3.1、使用 styled-components
        • 7.3.2、 使用 Emotion（推荐）
      • 7.4、CSS-in-JS 的优缺点
        • 7.4.1、优点
        • 7.4.2、缺点
      • 7.5、性能优化策略
      • 7.6、与传统 CSS 方案对比
      • 7.7、如何选择？
      • 7.8、最佳实践
    • 结语

1、普通方式-内联使用css

使用规则：

  • 和HTML元素的style类似
  • 必须是JS对象的写法，不能是字符串
  • 样式名要驼峰式写法，如fontSize

优缺点：

  • 优点：优先级最高，适合临时调试或覆盖特定样式。
  • 缺点：难以维护，样式与内容混杂，无法复用。
  • 适用场景：快速测试、临时修复或需要强制覆盖其他样式的场景。

2、引入css文件

2.1、示例

  • 使用css文件
  • JSX中使用className
  • 可使用clsx或者classnames做条件判断

给已发布的div添加额外的样式，QuestionCard.css如下

.list-item {border: 1px solid #ccc;padding: 10px;margin-bottom: 16px;
}.published {border-color: green;
}

QuestionCard.tsx如下所示：

import { FC, useEffect } from "react";import "./QuestionCard.css";...const QuestionCard: FC<PropsType> = (props) => {
...// 已发布的添加样式let itemClassName = "list-item";isPublished && (itemClassName = itemClassName + " published");return (<div key={id} className={itemClassName}>...</div>);
};export default QuestionCard;

这种情况，逻辑稍微复杂的话，代码繁琐，不方便维护，这里我们用第三方库classnames来解决，clsx类似，不在演示。

2.2、classnames

详细安装使用可以参考下面链接1github中介绍，这里直接改造上面样式,QuestionCard.tsx代码如下：

import classnames from "classnames";
import "./QuestionCard.css";const QuestionCard: FC<PropsType> = (props) => {...let itemClassName = classnames("list-item", { published: isPublished });...

3、内联css与引入css文件对比

3.1、内联css

优点：

  • 组件化作用域：样式天然限定在当前组件，无需担心全局污染。

  • 动态样式灵活：可直接基于 props 或 state 动态计算样式：

    jsx

    复制

    <div style={{ opacity: isActive ? 1 : 0.5 }}>

  • 无类名冲突：无需处理类名命名问题。

  • 适合快速原型开发：简单场景下无需维护额外 CSS 文件。

缺点：

  • 可维护性差：样式与逻辑混合，代码臃肿，难以复用。
  • 功能限制：无法直接使用伪类（:hover）、媒体查询、动画等 CSS 高级特性。
  • 性能问题：频繁更新的动态样式可能触发不必要的重渲染。
  • 优先级混乱：内联样式优先级较高，可能意外覆盖外部样式。

适用场景：

  • 简单的动态样式（如条件显隐、动态尺寸）。
  • 小型组件或临时调试。
  • 需要快速验证样式效果的场景。

3.2、 外部 CSS 文件（External CSS）

优点：

  • 样式与逻辑分离：代码更清晰，符合关注点分离原则。
  • 完整 CSS 功能：支持伪类、媒体查询、动画等所有 CSS 特性。
  • 复用性强：可跨组件复用样式（如全局主题、工具类）。
  • 性能优化：浏览器可缓存 CSS 文件，减少重复加载。
  • 工具链支持：与预处理器（Sass/Less）、PostCSS 无缝集成。

缺点：

  • 全局污染风险

4、css module

基本使用，css文件默认命名格式 xxx.module.css，QuestionCard.module.css如下

.list-item {border: 1px solid #ccc;padding: 10px;margin-bottom: 16px;
}.published {border-color: green;
}

QuestionCard.tsx如下：

...
import styles from "./QuestionCard.module.css";const QuestionCard: FC<PropsType> = (props) => {...return (<div key={id} className={styles["list-item"]}>...</div>);
};export default QuestionCard;

效果如下图所示：在这里插入图片描述

5、sass

  • css语法比较原始，如不能嵌套。

  • 现在开发一般使用less、sass等预处理语言

  • Vite等工具原生支持Sass Module，后

第一步：安装sass

yarn add sass -D

第二步：编辑样式文件，命名格式 xxxx.module.scss

.list-item {border: 1px solid #ccc;padding: 10px;margin-bottom: 16px;.published-span {color: green;}
}.published {border-color: green;
}

第三步：引入tsx

...
import styles from "./QuestionCard.module.scss";const QuestionCard: FC<PropsType> = (props) => {
...return (<div key={id} className={styles["list-item"]}><strong>{title}</strong>&nbsp;{/* 条件判断 */}{isPublished ? (<span className={styles["published-span"]}>已发布</span>) : (<span>未发布 </span>)}...</div>);
};export default QuestionCard;

效果如下图所示；在这里插入图片描述

6、classnames组合scss modules

以上面为例，给已发布的div设置绿色边框，QuestionCard.tsx如下所示：

...
import styles from "./QuestionCard.module.scss";const QuestionCard: FC<PropsType> = (props) => {
...// 已发布的添加样式const listItemClass = styles["list-item"];const publishedClass = styles["published"];const itemClassName = classnames({[listItemClass]: true,[publishedClass]: isPublished,});return (<div key={id} className={itemClassName}><strong>{title}</strong>&nbsp;{/* 条件判断 */}{isPublished ? (<span className={styles["published-span"]}>已发布</span>) : (<span>未发布 </span>)}...);
};export default QuestionCard;

效果如下所示：

在这里插入图片描述

7、css-in-js

在 React 和现代前端开发中，CSS-in-JS 是一种将 CSS 样式直接编写在 JavaScript/JSX 中的技术方案，它通过组件化的方式管理样式，解决了传统 CSS 的全局作用域污染、类名冲突等问题。以下是 CSS-in-JS 的核心解析和主流方案对比：

7.1、CSS-in-JS 的核心特性

特性说明
组件化作用域样式与组件绑定，天然隔离，避免全局污染
动态样式基于 props 或 state 动态生成样式，无需手动切换类名
自动厂商前缀自动为 CSS 属性添加浏览器前缀（如 -webkit-）
主题支持通过 Provider 模式轻松实现主题切换
SSR 支持支持服务端渲染（Server-Side Rendering）
原子化 CSS部分库（如 Emotion）支持生成原子化 CSS 类，优化性能

7.2、主流 CSS-in-JS 库对比

库名语法风格优势缺点适用场景
styled-components模板字符串生态成熟，社区活跃运行时开销较大通用场景
Emotion模板字符串/Object高性能，支持原子化 CSS配置较复杂性能敏感型项目
JSSObject 样式轻量级，框架无关可读性较差需要高度定制化的场景
Linaria模板字符串零运行时，编译时生成 CSS动态样式受限追求极致性能的静态站点

7.3、在 React 中的使用示例

7.3.1、使用 styled-components

bash

yarn add styled-components

jsx

import { FC } from "react";
import styled from "styled-components";// 基础组件
const Button = styled.button`padding: 12px 24px;background: ${(props) => (props.primary ? "#1890ff" : "#f5f5f5")};color: ${(props) => (props.primary ? "white" : "#333")};border-radius: 4px;&:hover {opacity: 0.8;}
`;// 继承样式
const LargeButton = styled(Button)`padding: 16px 32px;font-size: 18px;
`;const Demo: FC = () => {return (<div><Button>默认按钮</Button><Button primary>主按钮</Button><LargeButton>大按钮</LargeButton></div>);
};export default Demo;
7.3.2、 使用 Emotion（推荐）

bash

yarn add @emotion/react @emotion/styled

jsx

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';// 1. 使用 css prop
function DynamicComponent({ isActive }) {return (<divcss={css`padding: 20px;background: ${isActive ? '#1890ff' : '#f5f5f5'};&:hover {opacity: 0.8;}`}>动态样式</div>);
}// 2. 使用 styled API
const StyledButton = styled.button`padding: 12px 24px;border-radius: 4px;${props => props.variant === 'primary' && css`background: #1890ff;color: white;`}
`;function App() {return (<StyledButton variant="primary">Emotion 按钮</StyledButton>);
}

7.4、CSS-in-JS 的优缺点

7.4.1、优点
  • 样式与组件共存：无需在多个文件间跳转，提升开发体验。
  • 动态样式简便：直接基于组件状态或 props 驱动样式变化。
  • 自动作用域隔离：避免类名冲突，适合大型项目。
  • 主题和设计系统：通过 Context API 实现跨组件主题传递。
7.4.2、缺点
  • 运行时开销：动态生成 CSS 可能影响性能（可通过原子化 CSS 优化）。
  • 学习成本：需要熟悉新的 API 和模式。
  • 调试困难：生成的类名哈希化，开发者工具中可读性差。
  • 包体积增加：引入额外的运行时库（约 10-20 KB）。

7.5、性能优化策略

  1. 原子化 CSS
    使用 @emotion/css 生成原子类，复用样式声明：

    jsx

    复制

    import { css } from '@emotion/css';const flexCenter = css`display: flex;justify-content: center;align-items: center;
`;function Component() {return <div className={flexCenter}>居中内容</div>;
}

  2. 编译时提取 CSS
    使用 Linaria 或 Compiled 在构建时生成静态 CSS 文件：

    jsx

    复制

    // 使用 Linaria
import { css } from 'linaria';const title = css`font-size: 24px;color: #333;
`;function Component() {return <h1 className={title}>标题</h1>;
}

  3. 避免频繁样式更新
    对于高频更新的样式（如动画），优先使用 CSS 原生动画或 transform 属性。

7.6、与传统 CSS 方案对比

场景CSS-in-JSCSS Modules普通 CSS
作用域管理✅ 自动隔离✅ 哈希类名隔离❌ 需手动管理
动态样式✅ 基于 props/state❌ 需类名切换❌ 需类名切换
伪类/媒体查询✅ 完整支持✅ 完整支持✅ 完整支持
SSR 支持✅ 完善✅ 支持✅ 支持
性能⚠️ 运行时开销✅ 高效✅ 高效
适用项目规模中大型动态项目中大型项目小型项目或遗留系统

7.7、如何选择？

  1. 选择 CSS-in-JS 的场景：
    • 项目需要高度动态的样式（如主题切换、复杂交互状态）。
    • 团队偏好组件化开发模式，希望样式与逻辑紧密耦合。
    • 项目规模较大，需严格避免样式冲突。
  2. 避免 CSS-in-JS 的场景：
    • 追求极致性能（如低端设备或动画密集型应用）。
    • 需与非 React 生态共享样式（如跨框架组件库）。
    • 项目已稳定使用 CSS Modules 或 Tailwind CSS。

7.8、最佳实践

  1. 统一样式模式：团队约定使用单一方案（如 Emotion），避免混用多种 CSS 方案。

  2. 主题规范化：使用 ThemeProvider 管理颜色、间距等设计系统变量：

    jsx

    复制

    // 定义主题
const theme = {colors: { primary: '#1890ff' },spacing: { md: '16px' }
};// 在根组件传递主题
import { ThemeProvider } from '@emotion/react';function App() {return (<ThemeProvider theme={theme}><ChildComponent /></ThemeProvider>);
}// 子组件中使用主题
const Button = styled.button`padding: ${props => props.theme.spacing.md};background: ${props => props.theme.colors.primary};
`;

  3. 结合静态样式提取：对首屏关键 CSS 使用编译时工具生成，减少运行时开销。

CSS-in-JS 是现代 React 生态中强大的样式方案，尤其适合动态化、组件化的项目需求。根据团队习惯和性能要求选择合适的库，并遵循最佳实践，可显著提升开发效率和可维护性。

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]github classnames[CP/OL].

[2]styled-component官网[CP/OL].

[3]Classnames[CP/OL].

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/76074.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙开发者高级认证编程题库

鸿蒙开发者高级认证编程题库

题目一：跨设备分布式数据同步 需求描述 开发一个分布式待办事项应用，要求： 手机与平板登录同一华为账号时，自动同步任务列表任一设备修改任务状态（完成/删除），另一设备实时更新任务数据在设备离线时能本地存储，联网后自动同步实现方案 // 1. 定义分布式数据模型 imp…
阅读更多...
stream流Collectors.toMap()，key值重复问题

stream流Collectors.toMap()，key值重复问题

文章目录 一、问题二、问题示例三、原因四、解决方法4.1、方案一 一、问题 发现Collectors.toMap的一个坑&#xff0c;若key值重复的时候会抛异常。如&#xff1a; IllegalStateException: Duplicate key 男 二、问题示例 报错示例如下&#xff1a; import lombok.AllArgsC…
阅读更多...
《系统分析师-案例实践篇-16-22章总结》

《系统分析师-案例实践篇-16-22章总结》

案例实践篇
阅读更多...
未来 AI 发展趋势与挑战（AGI、数据安全、监管政策）

未来 AI 发展趋势与挑战（AGI、数据安全、监管政策）

从 ChatGPT 的火爆到国内 DeepSeek、通义千问、百川智能等模型的兴起，AI 正以前所未有的速度走入各行各业。而下一阶段，AI 是否会发展出真正的“通用智能”（AGI）？数据隐私、技术伦理又该如何应对？本文将带你全面洞察未来 AI 的技术趋势与落地挑战。 一、AGI 的曙光：通用…
阅读更多...
【微服务】SpringBoot整合LangChain4j 操作AI大模型实战详解

【微服务】SpringBoot整合LangChain4j 操作AI大模型实战详解

【微服务】SpringBoot整合LangChain4j 操作AI大模型实战详解 一、前言 随着人工智能技术的飞速发展&#xff0c;AI大模型已经在众多领域展现出强大的能力&#xff0c;为业务拓展和商业价值提升带来了新的机遇。SpringBoot作为一款广受欢迎的Java微服务框架&#xff0c;以其简…
阅读更多...
一种单脉冲雷达多通道解卷积前视成像方法【论文阅读】

一种单脉冲雷达多通道解卷积前视成像方法【论文阅读】

一种单脉冲雷达多通道解卷积前视成像方法-李悦丽-2007 1. 论文的研究目标与实际意义1.1 研究目标1.2 实际问题与产业意义2. 论文提出的思路、方法及模型2.1 多通道解卷积（MCD）技术的核心思想2.1.1 数学模型与公式推导2.1.2 针对单脉冲雷达的改进2.2 方法与传统技术的对比3. 实…
阅读更多...
Codeforces Round 1016 (Div. 3)题解

Codeforces Round 1016 (Div. 3)题解

题目地址 https://codeforces.com/contest/2093 锐评 在所有题意都理解正确的情况下&#xff0c;整体难度不算太难。但是偏偏存在F这么恶心的题意&#xff0c;样例都不带解释一下的&#xff0c;根本看不懂题。D题也恶心&#xff0c;在于递归过程的拆分&#xff0c;需要点数学…
阅读更多...
【python读取并显示遥感影像】

【python读取并显示遥感影像】

在Python中读取并显示遥感影像&#xff0c;可以使用rasterio库读取影像数据&#xff0c;并结合matplotlib进行可视化。以下是一个完整的示例代码&#xff1a; import rasterio import matplotlib.pyplot as plt import numpy as np# 打开遥感影像文件 with rasterio.open(path…
阅读更多...
怎样使用Python编写的Telegram聊天机器人

怎样使用Python编写的Telegram聊天机器人

怎样使用Python编写的Telegram聊天机器人 代码直接运行可用 以下是对这段代码的详细解释： 1. 导入必要的库 import loggingfrom telegram import Update from telegram.ext import ApplicationBuilder, ContextTypes, CommandHandler, filters, MessageHandler import log…
阅读更多...
moviepy学习使用笔记

moviepy学习使用笔记

目录 1. moviepy安装版本选择安装命令2. 使用文档1.0.3文档中文文档写的比较好的学习博客2.x文档1.0.3到2.x快速上手3. 可能遇到的问题3.1 依赖问题3.2 中文显示问题4. 特效示例中文显示的问题1. moviepy安装 版本选择 moviepy有两个主流版本： 1.0.3 和 2.x 目前2.x版本称不…
阅读更多...
docker各种清空缓存命令，下载jdk包总失败，执行完好了

docker各种清空缓存命令，下载jdk包总失败，执行完好了

清理未使用的镜像&#xff08;推荐&#xff0c;最常用&#xff09;&#xff1a; docker image prune -a 清理所有未使用的数据&#xff08;包括镜像、容器、网络和构建缓存&#xff09;&#xff1a; docker system prune -a 清理所有未使用的数据&#xff0c;包括未使用的卷…
阅读更多...
NO.78十六届蓝桥杯备战|数据结构-并查集|双亲表示法|初始化|查询|合并|判断|亲戚|Lake Counting|程序自动分析(C++)

NO.78十六届蓝桥杯备战|数据结构-并查集|双亲表示法|初始化|查询|合并|判断|亲戚|Lake Counting|程序自动分析(C++)

双亲表⽰法 接下来要学习到的并查集&#xff0c;本质上就是⽤双亲表⽰法实现的森林。因此&#xff0c;我们先认识⼀下双亲表⽰法。 在学习树这个数据结构的时&#xff0c;讲到树的存储⽅式有很多种&#xff1a;孩⼦表⽰法&#xff0c;双亲表⽰法、孩⼦双亲表⽰法以及孩⼦兄弟表…
阅读更多...
Ubuntu挂载HDD迁移存储PostgreSQL数据

Ubuntu挂载HDD迁移存储PostgreSQL数据

关联博客&#xff1a;windows通用网线连接ubuntu实现ssh登录、桌面控制、文件共享 背景&#xff1a; 在个人ubuntu机器上安装了pgsql&#xff0c;新建了一张表插入了2000w数据用于模拟大批量数据分页查询用&#xff0c;但是发现查询也不慢&#xff08;在公司测试环境查询1700…
阅读更多...
Spring MVC与Spring Boot文件上传配置项对比

Spring MVC与Spring Boot文件上传配置项对比

Spring MVC与Spring Boot文件上传配置项对比 一、Spring MVC配置项&#xff08;基于不同MultipartResolver实现&#xff09; 1. 使用 CommonsMultipartResolver&#xff08;Apache Commons FileUpload&#xff09; Bean public MultipartResolver multipartResolver() {Common…
阅读更多...
Android 学习之 Navigation导航

Android 学习之 Navigation导航

1. Navigation 介绍 Navigation 组件 是 Android Jetpack 的一部分&#xff0c;用于简化应用内导航逻辑&#xff0c;支持 Fragment、Activity 和 Compose 之间的跳转。核心优势&#xff1a; 单 Activity 架构&#xff1a;减少 Activity 冗余&#xff0c;通过 Fragment 或 Com…
阅读更多...
Docker Compose 部署Nginx反向代理 tomcat

Docker Compose 部署Nginx反向代理 tomcat

Nginx 、Tomcat (默认端口8080)》》compose services:nginx:image: nginx:latestcontainer_name: nginxrestart: alwaysports:- 80:80- 8080:8080volumes:# 文件夹会自动创建&#xff0c;但nginx.conf是文件&#xff0c;需要提前创建&#xff0c;否则 会自动创建nginx.conf文件…
阅读更多...
数据库7（数据定义语句，视图，索引）

数据库7（数据定义语句，视图，索引）

1.数据定义语句 SQL数据定义语言&#xff08;DDL&#xff09;用于定义和管理数据库结构&#xff0c;包括创建、修改和删除 数据库对象。常见的DDL语句包括CREATE、DROP和ALTER。 它的操作的是对象&#xff0c;区分操作数据的语句&#xff1a;INSERT,DELETE,UPDATE 示例&#x…
阅读更多...
QML面试笔记--UI设计篇02布局控件

QML面试笔记--UI设计篇02布局控件

1. QML 中常用的布局控件 1.1. Row1.2. Column1.3. Grid1.4. RowLayout1.5. ColumnLayout1.6. GridLayout1.7. 总结 1. QML 中常用的布局控件 1.1. Row 背景知识&#xff1a;Row 布局用于将子元素水平排列&#xff0c;适合简单的线性布局&#xff0c;如工具栏按钮或表单输入…
阅读更多...
Compose组件转换XML布局1.0

Compose组件转换XML布局1.0

文章目录 学习JetPack Compose资源前言&#xff1a;预览界面的实现Compose组件的布局管理一、Row和Colum组件&#xff08;LinearLayout&#xff09;LinearLayout&#xff08;垂直方向 → Column&#xff09;LinearLayout&#xff08;水平方向 → Row&#xff09; 二、相对布局 …
阅读更多...
从零构建大语言模型全栈开发指南：第五部分：行业应用与前沿探索-5.2.1模型偏见与安全对齐（Red Teaming实践）

从零构建大语言模型全栈开发指南：第五部分：行业应用与前沿探索-5.2.1模型偏见与安全对齐（Red Teaming实践）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 大语言模型全栈开发指南：伦理与未来趋势 - 第五部分：行业应用与前沿探索5.2.1 模型偏见与安全对齐（Red Teaming实践）一、模型偏见的来源与影响1. 偏见的定义与分类2. 偏见的实际影响案例二、安全对齐…
阅读更多...
最新文章

Copyright @ 2022~2023