Styled Components为何额外添加margin样式覆盖自定义设置？

你遇到的后两个StyledComponentmargin被额外样式覆盖、第一个正常且内联style不受影响的情况，结合代码细节，大概率是这几个原因：

1. 组件引用写错了 #

你定义的样式组件是BorderDiv，但StyledComponent里渲染的却是StyledDiv——这明显是笔误。如果StyledDiv是项目里其他地方定义的组件或全局样式组件，后面的实例就会继承它的额外margin样式，第一个组件可能因为渲染顺序或缓存没触发这个问题。

2. 全局样式的相邻兄弟选择器搞事 #

要是承载组件的外层div有类似这样的全局CSS：

div + div {
  margin: 1.5rem 0; /* 或者其他和你设置的1rem冲突的值 */
}

这种选择器会给第2、3个StyledComponent（作为div的子元素）加额外margin。而内联style优先级比类选择器高，所以不会被覆盖，第一个组件因为没有前一个兄弟元素，自然也不受影响。

3. Props传递写错了 #

你的StyledComponent里写的是prop.exists，正确应该是props.exists（少了个s）。如果实际代码里真的有这个错误，后两个组件的isExistingWorkflow会拿到undefined，要是你的样式或全局逻辑针对undefined情况有额外margin设置，就会出问题。不过第一个组件也会受影响，可能是你贴代码时手滑了，但还是要检查下实际代码。

4. 开发环境热更新缓存坑了你 #

React开发环境里，Styled Components的热更新偶尔会抽风，导致后面渲染的组件加载了旧的或额外的样式类。这种情况重启下开发服务器基本就能解决。

验证方法 #

• 先把StyledComponent里的StyledDiv改成BorderDiv，看问题是否消失；
• 打开浏览器DevTools的元素面板，对比第一个和后两个组件的类名和应用的样式，找到到底是哪条CSS规则覆盖了margin；
• 临时注释掉全局样式，看看问题还在不在；
• 重启开发服务器，排除缓存的影响。

内容的提问来源于stack exchange，提问作者Aetos11