styled-components中如何为同类型不同元素设置差异化CSS样式

针对同标签元素需要设置不同样式的场景，按不同业务规模选对应方案即可，没有绝对的最优解，核心是平衡代码复用率和维护成本：

1. 传Props动态控制样式（最常用） #

适合元素公共样式多、仅少量属性有差异的场景，把公共样式写在基础组件里，差异化的值通过组件入参动态传入。
先定义支持动态属性的基础组件：

export const StyledDiv = styled.div`
  /* 所有实例共用的公共样式写在这里 */
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  /* 差异化属性通过props取值，支持设置默认值 */
  color: ${props => props.textColor || 'red'};
`

使用时给不同实例传入不同参数即可，不需要重复写公共样式：

{/* 不传参走默认值，文字为红色 */}
<StyledDiv>红色文字的div</StyledDiv>
{/* 传参设置为蓝色 */}
<StyledDiv textColor="blue">蓝色文字的div</StyledDiv>
{/* 支持任意合法CSS颜色值 */}
<StyledDiv textColor="#2ecc71">绿色文字的div</StyledDiv>

如果是一次性的小样式调整，甚至不用给组件加动态props，直接传原生style属性做行内覆盖即可，适合仅出现一次的特殊样式：

<StyledDiv style={{ marginTop: '24px', fontWeight: 600 }}>临时特殊样式的div</StyledDiv>

2. 基于基础组件派生样式变体 #

适合页面中有固定几套明确样式、重复使用率高的场景，基于公共基础组件二次封装不同的变体组件，使用时不需要反复传props，语义更清晰。

// 只放所有div共用的最基础样式
const BaseDiv = styled.div`
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
`
// 派生不同样式的变体
export const RedDiv = styled(BaseDiv)`
  color: red;
  background: #fff1f0;
  border: 1px solid #ffccc7;
`
export const BlueDiv = styled(BaseDiv)`
  color: blue;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
`

使用时直接引入对应变体组件即可：

<RedDiv>错误提示类div</RedDiv>
<BlueDiv>信息提示类div</BlueDiv>

3. 大差异元素不要强行复用组件 #

如果实际场景里数十个div之间几乎没有公共样式（除了同是div标签），不要硬套同一个基础组件加一堆props判断——比如给组件加七八个isBig、isRed、hasBorder这类开关属性，后期维护时改一个样式很容易影响其他实例，反而增加维护成本。这种情况直接给不同功能的div单独定义styled组件即可，不要为了“复用”而强行抽离公共逻辑。

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