【高频考点精讲】前端工程师必会的10种CSS-in-JS方案对比

前端工程师必会的10种CSS-in-JS方案对比：从Styled-components到Emotion全解析

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近在给团队做技术分享时，发现不少同学对CSS-in-JS的理解还停留在"就是把CSS写在JS里"的层面。作为深耕前端领域多年的全栈老李，今天就来给大家掰开了揉碎了讲讲这个前端工程化中绕不开的话题。

为什么我们需要CSS-in-JS？

记得我刚入行那会儿，CSS还都是写在单独的.css文件里。直到有一天，我在一个大型项目中遇到了"样式污染"这个魔鬼——明明改了A组件的样式，B组件却莫名其妙地崩了。这种"牵一发而动全身"的体验，相信不少老前端都深有体会。

CSS-in-JS的出现，本质上是为了解决传统CSS的三大痛点：

1. 作用域问题：再也不用担心.className冲突了
2. 动态样式：基于props/state的样式变化变得轻而易举
3. 代码组织：样式和组件真正实现了"高内聚"

// 传统CSS的噩梦（全栈老李提醒：这种全局样式要尽量避免）
.button {
   
   
  background: blue;
}

// 某个深埋的组件里
<div className="button">提交</div> // 突然变成蓝色了？！

主流方案横向对比

1. Styled-components：社区顶流

import styled from 'styled-components';

// 全栈老李小技巧：用attrs避免重复传递相同props
const Button = styled.button.attrs({
   
    
  type: 'button' 
})`
  background: ${
     
     props => props.primary ? 'palevioletred' : 'white'};
  color: ${
     
     props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 使用