CSS-in-JS通过JavaScript动态生成样式，提升组件样式的灵活性与可维护性。1. 主流方案包括styled-components（模板字符串创建组件，支持props驱动）、emotion（兼容多种写法，支持css prop）和linaria（编译时提取CSS，性能佳）。2. 可基于props动态设置样式，如styled-components中根据primary属性切换按钮颜色。3. 结合React状态或context实现主题切换与状态响应，如emotion中通过isHighlighted控制背景色。4. 支持媒体查询与伪类，styled-components可通过嵌套写法实现响应式布局与hover效果。5. 优势在于逻辑与样式统一，但需避免过度计算样式以保持性能与可读性。
使用CSS-in-JS技术可以将样式直接写在JavaScript中，让组件的样式更具动态性和可维护性。它通过在运行时动态生成CSS类名或内联样式，实现对组件样式的灵活控制，尤其适合需要根据状态、主题或属性动态调整样式的场景。
选择合适的CSS-in-JS库
目前主流的CSS-in-JS方案包括styled-components、emotion和linaria等。其中：
- styled-components：通过模板字符串创建带样式的React组件，支持props驱动样式变化。
- emotion：兼容多种写法，既支持类似styled-components的API，也支持css prop方式，灵活性高。
- linaria：编译时提取CSS，不依赖运行时，适合性能敏感项目。
基于props动态设置样式
在组件中，可以根据传入的props实时改变样式表现。例如使用styled-components：
const Button = styled.button`
background-color: ${props => (props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
`;这样调用<Button primary>确认</Button>时按钮为蓝色，普通状态则为灰色，样式随属性自动更新。
立即学习“前端免费学习笔记（深入）”；
响应组件状态与主题切换
结合React的state或context，可以实现更复杂的动态样式逻辑。比如使用ThemeContext配合emotion：
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
<p>function MyComponent({ isHighlighted }) {
return (
<div
css={css<code> background: ${isHighlighted ? 'yellow' : 'transparent'}; transition: background 0.3s ease; </code>}
>
动态背景
</div>
);
}也可以配合useTheme等钩子读取主题变量，统一管理颜色、字体等设计系统属性。
处理媒体查询与伪类
CSS-in-JS同样支持复杂CSS规则。例如在styled-components中嵌套写法：
const ResponsiveBox = styled.div`
width: 100%;
@media (min-width: 768px) {
width: 50%;
}
&:hover {
transform: scale(1.02);
}
`;这种写法保持了CSS原有的表达能力，同时具备JS的逻辑控制优势。
基本上就这些。合理利用CSS-in-JS，能让样式与组件逻辑紧密结合，提升开发效率和可维护性。注意避免过度使用内联计算样式，保持可读性与性能平衡。
