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动态生成样式规则，并注入到页面的 <style> 标签中。
立即学习“前端免费学习笔记（深入）”；
二、使用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表达式动态控制样式输出，特别适合需要响应状态变化的场景。
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() 方法激活样式表，使其生效。
