【揭秘】CSS in JS:用JS对象定义样式,告别类名冲突(4)

news/2024/11/19 20:04:03/

CSS-in-JS 是一种将 CSS 样式以 JavaScript 对象的形式来描述的方法。这种方法的核心思想是用 JavaScript 对象来描述样式,而不是传统的 CSS 样式表。CSS-in-JS 在现代前端开发中越来越流行,特别是在使用 React 和 Vue 等现代框架时。

1. 基本概念

1.1 描述样式

用一个 JavaScript 对象来描述样式,例如:

javascript">const styles = {backgroundColor: '#f40',color: '#fff',width: '400px',height: '500px',margin: '0 auto'
};

1.2 应用样式

如何将样式应用到界面上,不是 CSS-in-JS 关心的事情。你可以用任何技术、任何框架、任何方式将它应用到界面。例如,在 React 中,可以这样做:

import React from 'react';const styles = {backgroundColor: '#f40',color: '#fff',width: '400px',height: '500px',margin: '0 auto'
};function App() {return (<div style={styles}>Hello, World!</div>);
}export default App;

2. 特点

2.1 绝无冲突的可能

由于 CSS-in-JS 根本不存在类名,所以绝不可能出现类名冲突。每个样式对象都是独立的,不会与其他样式对象产生冲突。

2.2 更加灵活

可以充分利用 JavaScript 语言的灵活性,用各种方式来处理样式。例如:

  • 动态样式:根据状态动态生成样式。
  • 公共样式:可以将公共样式提取到公共模块中返回。
  • 条件样式:根据条件应用不同的样式。
import React from 'react';const commonStyles = {margin: '0 auto',padding: '10px'
};function App({ isRed }) {const styles = {...commonStyles,backgroundColor: isRed ? '#f40' : '#0f0',color: '#fff',width: '400px',height: '500px'};return (<div style={styles}>Hello, World!</div>);
}export default App;

2.3 应用面更广

只要支持 JavaScript 语言,就可以支持 CSS-in-JS。因此,在一些用 JavaScript 语言开发移动端应用的时候非常好用,因为移动端应用可能并不支持 CSS。例如,在 React Native 中,CSS-in-JS 是标准的样式处理方式。

2.4 书写不便

书写样式,特别是公共样式的时候,处理起来不是很方便。CSS-in-JS 的样式对象通常比传统的 CSS 代码更冗长,尤其是在处理复杂样式时。

2.5 在页面中增加了大量冗余内容

在页面中处理 CSS-in-JS 时,往往是将样式加入到元素的 style 属性中,会大量增加元素的内联样式,并且可能会有大量重复,不易阅读最终的页面代码。

3. 常见的 CSS-in-JS 库

3.1 styled-components

styled-components 是一个非常流行的 CSS-in-JS 库,它允许你用模板字符串来编写样式,并将其与组件关联起来。

import React from 'react';
import styled from 'styled-components';const Div = styled.div`background-color: #f40;color: #fff;width: 400px;height: 500px;margin: 0 auto;
`;function App() {return (<Div>Hello, World!</Div>);
}export default App;

3.2 emotion

emotion 是另一个流行的 CSS-in-JS 库,它提供了类似于 styled-components 的功能,但更加轻量。

import React from 'react';
import { css, jsx } from '@emotion/react';const styles = css`background-color: #f40;color: #fff;width: 400px;height: 500px;margin: 0 auto;
`;function App() {return (<div css={styles}>Hello, World!</div>);
}export default App;

4. 总结

通过本课程,你已经了解了 CSS-in-JS 的基本概念、特点以及常见的 CSS-in-JS 库。CSS-in-JS 提供了一种全新的方式来处理样式,解决了传统 CSS 中的一些问题,但也带来了一些新的挑战。合理使用 CSS-in-JS,可以提高开发效率和代码质量。


http://www.ppmy.cn/news/1548315.html

相关文章

【mysql】锁机制 - 3.意向锁

意向锁&#xff08;Intension Lock&#xff09; 是为了提高粗粒度锁性能而设置的一种预判机制&#xff0c;即在一个操作发起实际资源的锁申请行为之前&#xff0c;先对更粗力度的资源发起一个加锁意向声明。 为什么需要意向锁&#xff1f; 比如对于以下操作&#xff1a; 事务…

【Linux】文本处理命令grep

grep 是一个在 Unix 和类 Unix 操作系统中广泛使用的命令行工具&#xff0c;用于搜索文本。grep 命令非常强大&#xff0c;因为它可以快速地在大量文本中搜索特定的模式&#xff08;patterns&#xff09;。 以下是 grep 的一些主要特性&#xff1a; 模式匹配&#xff1a;grep …

学习笔记027——Windows安装解压版MySQL配置(8.0系列版本)

首先下载MySQL压缩包。 本人下载的是8.0.18版本。 文章目录 1、解压MySQL压缩包2、添加系统变量3、修改my.ini文件4、初始化5、相关设置6、服务停止7、更改加密方式 1、解压MySQL压缩包 解压MySQL压缩包文件到自己需要的目录。 我的目录是&#xff1a;C:\Program Files\MySQ…

使用Python语言编写一个简单的网页爬虫,从网站上抓取指定关键词的新闻标题和链接。

江河湖海的博客&#xff1a;网页爬虫的奇幻漂流 1. 简介 1.1. 什么是网页爬虫 想象一下&#xff0c;你是一名勇敢的探险家&#xff0c;站在一片浩瀚的网络海洋前。你的目标是穿越这片信息海洋&#xff0c;寻找那些隐藏在深处的珍宝——数据。而网页爬虫就是你的魔法船&#…

SRP 实现 Cook-Torrance BRDF

写的很乱&#xff01; BRDF&#xff08;Bidirectional Reflectance Distribution Function&#xff09;全称双向反射分布函数。辐射量单位非常多&#xff0c;这里为方便直观理解&#xff0c;会用非常不严谨的光照强度来解释说明。 BRDF光照模型&#xff0c;上反射率公式&#…

分布式IO模块:汽车产线注塑设备的智能化升级

在汽车制造这一日新月异的行业中&#xff0c;高效、精准的生产线是实现产品高质量与低成本的关键。特别是在注塑设备环节&#xff0c;对精确控制和高效率的追求从未停歇。注塑设备是汽车零配件制造中不可或缺的一环&#xff0c;用于生产如车灯、保险杠等关键部件。传统的注塑生…

华为ID机试 -- 分糖果 E100

题目描述 小明从糖果盒中随意抓一把糖果&#xff0c;每次小明会取出一半的糖果分给同学们。 当糖果不能 平均分配只时&#xff0c;小明可以选择从糖果盒中(假设盒中糖果足够)取出一个糖果或放回一个糖果。 小明最少需要多少次(取出、放回和平均分配均记一次)&#xff0c;能将…

Linux 系统下的硬件视频加速

在浏览器研发中&#xff0c;GPU 硬件加速相关的问题常常令人头疼&#xff0c;而这些问题中&#xff0c;视频播放更是棘手。回顾以往&#xff0c;在基于 Android 系统开发浏览器时&#xff0c;我曾撰写了一系列与浏览器视频播放相关的技术文章&#xff1a; Chromium HTML Video …