styled-components的核心是运行时生成带作用域的样式化react组件，而非加载css文件；import './button.css'会全局注入样式，与styled.button动态生成的唯一哈希类名互不感知，混用易导致意外交互和样式覆盖。
直接用 styled 创建组件，而不是“引入CSS文件”——styled-components 的核心不是加载样式表，而是生成带作用域的样式化 React 组件。
为什么不能 import './Button.css' 然后搭配 styled.button 使用
这是常见误解。你不能一边 import './Button.css'，一边又用 styled.button 去“叠加”或“接管”那个 CSS 文件里的类名。styled-components 完全绕过传统 CSS 文件路径，它在运行时把模板字符串编译成唯一类名，并注入 <style></style> 标签。如果你同时引入外部 CSS，两类样式会共存但互不感知，容易出现意外交互（比如外部 .btn 覆盖了 styled.button 的 hover 效果）。
- 所有样式必须写在
styled.xxx的模板字符串里，或通过插值函数动态生成 - 外部 CSS 文件（如
App.css）和styled-components属于不同样式体系，混用需明确边界（例如仅用于全局重置，不参与组件样式逻辑） - VS Code 装
vscode-styled-components插件后，模板字符串内支持 CSS 语法高亮和属性提示，但普通.css文件里的规则对styled无效
如何用 props 动态控制颜色、尺寸、禁用态
这是 styled-components 最实用的能力，但插值写法容易出错。
- 必须用箭头函数：
const Button = styled.button`background: ${props => props.primary ? '#007bff' : '#6c757d'};`—— 漏掉props =>会导致props是 undefined - 布尔 props 不会自动转 CSS 值：写
opacity: ${props => props.disabled}是错的，返回的是true，不是合法 CSS；要写成opacity: ${props => props.disabled ? 0.5 : 1}; - 避免在插值里做耗时操作：比如
${props => props.list.map(...).join('')}，每次渲染都执行，可能卡顿；应提前计算好再传入 - 支持解构默认值：
const Box = styled.div`width: ${({ w = 'auto' }) => w};`，防止w未传时出错
怎么避免 class 名重复或样式泄漏到其他组件
styled-components 默认就解决这个问题，但有两个关键点常被忽略：
- 每个
styled.xxx调用都会生成唯一哈希类名（如sc-bwzfXK fYvFjZ），父组件里写的.content只作用于该组件内部后代，不会影响其他组件同名类 - 如果用了嵌套写法（如
const Container = styled.div` .content { color: red; } `），这个.content实际会被自动加上父组件的唯一前缀，等效于.fYvFjZ .content，所以安全 - 但注意：不要在模板字符串里写全局选择器，比如
body { margin: 0 }或button:hover—— 这些会逃逸出作用域，污染全局 - 需要全局重置？单独建一个
GlobalStyle组件，用createGlobalStyle，而不是塞进某个styled.div
真正难的不是写对第一行 styled.button，而是在多人协作中保持插值逻辑的纯度和可预测性——比如同一个 size prop 在按钮、输入框、卡片里含义是否一致，有没有统一的 token 映射表。这些没法靠工具自动检查，得靠团队约定和 code review 来守住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
