CSS中in JS是什么意思

css-in-js是一种将样式写入javaScript的模式，常见于react中，通过styled-components、emotion和JSS等库实现组件化样式管理，提升封装性与动态控制能力。

如果您在开发前端项目时遇到样式管理的问题，可能会听说一种将CSS样式直接写在javascript代码中的做法，这就是“CSS-in-JS”。以下是关于这一技术的详细说明：

本文运行环境：macBook Pro，macOS Sonoma

一、理解CSS-in-JS的基本概念

CSS-in-JS 是一种将CSS样式逻辑嵌入到JavaScript文件中的编程模式，尤其常见于React等组件化框架中。其核心思想是将组件的样式与其行为和结构封装在一起，实现真正的组件隔离。

采用这种方式后，开发者不再需要单独维护 .css 文件，而是通过JavaScript动态生成样式规则，并注入到页面的

标签中。

立即学习“前端免费学习笔记（深入）”；

二、使用styled-components创建样式

styled-components 是 CSS-in-JS 的流行实现之一，它允许你使用模板字符串语法来定义html元素的样式。

1、安装依赖包：npm install styled-components。

2、在React组件中导入库：import styled from ‘styled-components’;。

3、定义一个带样式的按钮组件：const StyledButton = styled.button`background: blue; color: white; padding: 10px;`;。

4、在JSX中像普通组件一样使用该样式化元素。

三、采用emotion进行条件样式处理

emotion 是另一个功能强大的CSS-in-JS库，支持通过JavaScript表达式动态控制样式输出，特别适合需要响应状态变化的场景。

Docky AI

多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作

87

查看详情

1、安装emotion及其插件：npm install @emotion/react @emotion/styled。

2、使用 css 属性为元素添加内联样式对象。

3、利用props传递参数，在样式函数中返回不同的颜色或布局配置。

4、结合 @emotion/babel-plugin 实现编译时优化，提升运行性能。

四、通过JSS实现可维护的样式对象

JSS 是一个低层级的CSS-in-JS引擎，适用于需要高度自定义和主题系统集成的应用程序。

1、引入核心库：npm install jss。

2、定义一个样式对象，键名为类名，值为包含CSS属性的JavaScript对象。

3、调用 jss.createStyleSheet() 方法生成实际的CSS并注入文档头部。

4、通过 attach() 方法激活样式表，使其生效。