答案：css-in-js将样式写入javascript，实现动态样式、作用域隔离与主题管理。使用styled-components等库可通过props动态调整样式，结合themeprovider传递主题，在组件中嵌入媒体查询实现响应式设计，提升开发效率与可维护性。
使用CSS-in-JS可以在组件中直接定义和管理样式，实现动态化、作用域隔离和主题切换等功能。它将CSS写在JavaScript中，让样式与组件逻辑紧密结合，特别适合React等现代前端框架。
选择合适的CSS-in-JS库
常见的CSS-in-JS方案包括styled-components、emotion和JSS。它们都支持动态样式，但语法和生态略有不同。
- styled-components：通过模板字符串创建带样式的组件，支持props传值动态生成样式。
- emotion：兼容多种写法，既支持css prop也支持styled API，性能优秀。
- JSS：更偏向配置对象形式，适合需要高度可配置的场景。
以styled-components为例，安装后可在项目中直接使用：
npm install styled-components
基于Props动态调整样式
最常用的方式是根据组件的props来改变样式。这种方式适用于按钮状态、主题颜色、尺寸变化等场景。
例如，创建一个可以根据variant和size动态调整外观的按钮：
const Button = styled.button`
background-color: ${props => props.variant === 'primary' ? '#1976d2' : '#ccc'};
color: white;
padding: ${props => props.size === 'large' ? '12px 24px' : '8px 16px'};
border: none;
border-radius: 4px;
font-size: ${props => props.size === 'large' ? '16px' : '14px'};
cursor: pointer;
<p>&:hover {
opacity: 0.9;
}
`;</p>
使用时传递props即可：
<button variant="primary" size="large">点击我</button>
支持主题和全局样式管理
CSS-in-JS天然支持主题系统。通过ThemeProvider可以向下传递主题变量，组件中通过props.theme访问。
定义主题：
const theme = {
colors: {
primary: '#1976d2',
secondary: '#ff4081'
},
spacing: (factor) => `${0.5 * factor}rem`
};
在根组件包裹ThemeProvider：
<themeprovider theme="{theme}"><app></app></themeprovider>
组件中使用主题：
const Header = styled.h1`
color: ${props => props.theme.colors.primary};
margin-bottom: ${props => props.theme.spacing(2)};
`;
处理响应式和媒体查询
可以在样式中直接嵌入媒体查询，并结合props做响应式设计。
例如：
const Container = styled.div`
width: 100%;
padding: 16px;
<p>@media (min-width: 768px) {
width: 750px;
margin: 0 auto;
}</p><p>@media (min-width: 1200px) {
width: 1170px;
}</p><p>background: ${props => props.bg || '#fff'};
`;</p>
也可以把断点提取为变量，提升可维护性。
基本上就这些。通过结合props、主题和条件逻辑，CSS-in-JS能灵活应对各种动态样式需求，同时避免类名冲突，提升开发效率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
