CSS in JS 把样式当作组件的一部分：每个组件自带样式，删除组件时样式一起消失，天然没有全局污染、没有死代码。它还能直接读取组件 props 动态计算样式，比如按钮根据 disabled 变灰、根据 size 变大，不再需要额外维护一套 class 命名与切换逻辑；主题切换通过 ThemeProvider 注入即可，非常契合 React 的组件化思想。
争议的核心是运行时开销与提取方式：早期方案在运行时生成类名并注入 style 标签，首屏渲染多一层成本；后来的 linaria、vanilla-extract 等零运行时方案把编译提前到构建期，兼顾隔离与性能。另一个痛点是调试时类名是一串哈希，需要配 babel 插件才能还原原名。动态主题密集的 React 应用最适合它，纯静态内容站则显得重。
/* styled-components 的典型写法 */ import styled from 'styled-components'; const Button = styled.button` background: ${props => props.primary ? '#4a9eff' : '#fff'}; color: ${props => props.primary ? '#fff' : '#4a9eff'}; border-radius: 6px; padding: 8px 16px; `; /* props 变化样式即变化，无需切换 class */