Styled-Components中如何根据指定类名为组件添加额外样式

实现方法 #

你可以在StyledButton的样式定义中使用自身选择器（&）+ 类名选择器的组合实现需求：&在styled-components的样式模板里代表当前组件本身的最终选择器，直接拼接你要匹配的指定类名即可。

举个例子，如果你要匹配类名为button-submit的场景，写法如下：

const StyledButton = styled.button`
  /* 此处为原有基础样式 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;

  /* 指定类名对应的额外样式 */
  &.button-submit {
    background: #1677ff;
    color: #fff;
  }

  /* 有多个需要匹配的类名可以继续追加规则 */
  &.button-danger {
    background: #ff4d4f;
    color: #fff;
  }
`;

拓展方案（可选） #

如果你的类名是完全动态的，也可以直接通过props传参的方式控制样式，不需要依赖类选择器判断，写法更简洁：

const StyledButton = styled.button`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  ${props => props.btnType === 'submit' && `
    background: #1677ff;
    color: #fff;
  `}
`
// 组件调用方式：<StyledButton btnType="submit">{content}</StyledButton>

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