CSS-in-JS 是一种将样式与 JavaScript 组件结合的技术，通过 styled-components 等库实现动态插值、主题管理和响应式设计，支持基于状态和主题的样式变化，并通过 ThemeProvider 集中管理全局样式变量，提升组件样式的可维护性和隔离性。
在现代前端开发中，动态管理样式是构建高度可定制和响应式用户界面的关键。CSS-in-JS 库通过将样式直接写入 JavaScript 文件，提供了更灵活的样式组织方式，尤其适合需要根据组件状态或主题动态改变样式的场景。
什么是 CSS-in-JS？
CSS-in-JS 是一种将 CSS 样式绑定到 JavaScript 组件的技术。它允许你在组件内部定义样式，而不是依赖外部的 CSS 文件。常见的库包括 styled-components、emotion 和 JSS。
这类方案的核心优势在于支持动态插值、主题传递和作用域隔离，避免了类名冲突和全局污染。
使用 styled-components 实现动态样式
styled-components 是最流行的 CSS-in-JS 库之一，它利用模板字符串和 props 来实现动态样式。
立即学习“前端免费学习笔记（深入）”；
例如，创建一个根据 isActive 状态改变背景色的按钮：
const StyledButton = styled.button`
background-color: ${props => props.isActive ? '#007bff' : '#ccc'};
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
`;
function App() {
const [active, setActive] = useState(false);
return (
<StyledButton isActive={active} onClick={() => setActive(!active)}>
点击切换状态
</StyledButton>
);
}
这里，样式直接依赖于组件的 props，状态变化时样式自动更新。
结合主题（Theme）进行全局样式管理
通过 ThemeProvider，可以将设计变量（如颜色、字体、间距）集中管理，并在任意组件中访问。
定义主题对象：
const theme = {
primaryColor: '#007bff',
secondaryColor: '#6c757d',
borderRadius: '8px',
fontSize: {
small: '14px',
large: '18px'
}
};
在应用根部包裹 ThemeProvider：
import { ThemeProvider } from 'styled-components';
function App() {
return (
<ThemeProvider theme={theme}>
<Navbar />
<Content />
</ThemeProvider>
);
}
子组件中即可使用主题变量：
const Title = styled.h1`
color: ${props => props.theme.primaryColor};
font-size: ${props => props.large ? props.theme.fontSize.large : props.theme.fontSize.small};
`;
处理媒体查询与响应式设计
CSS-in-JS 同样支持响应式样式。你可以在样式规则中直接插入媒体查询，并结合 JS 逻辑控制断点。
示例：根据不同屏幕宽度调整字体大小：
const ResponsiveText = styled.p`
font-size: 16px;
@media (min-width: 768px) {
font-size: 20px;
}
@media (min-width: 1024px) {
font-size: 24px;
}
`;
也可以将断点提取为变量，提升可维护性：
const breakpoints = {
tablet: '768px',
desktop: '1024px'
};
const Container = styled.div`
width: 100%;
@media (min-width: ${breakpoints.tablet}) {
width: 750px;
}
`;
基本上就这些。使用 CSS-in-JS 能让样式更贴近组件逻辑，特别是在处理状态驱动的视觉变化时非常直观。虽然它可能带来运行时开销，但在大多数项目中，其开发体验和维护优势远大于成本。
