如何在styled-components UI库中为所有按钮定义通用CSS类？

核心思路 #

把多个按钮组件的重复样式（比如你示例里的margin: 3px 0.5rem、cursor: pointer）抽离成通用样式块，让所有按钮组件复用这块样式，只保留各自的特有样式，最终生成的CSS就会和你期望的结构一致。

方法一：用css辅助函数抽离通用样式 #

这是styled-components官方推荐的复用样式的方式，适合抽离零散的通用规则：

1. 先导入css辅助函数：

import styled, { css } from 'styled-components';

2. 定义通用样式块：

// 对应你期望的button-multual-css
const buttonMutualStyles = css`
  margin: 3px 0.5rem;
  cursor: pointer;
`;

3. 在各个按钮组件中引入通用样式，再添加特有样式：

const Button1 = styled.button`
  ${buttonMutualStyles}
  /* Button1的特有样式，对应你示例里的--another css */
  background-color: #2196F3;
  color: #fff;
  border: none;
  padding: 8px 16px;
`;

const Button2 = styled.button`
  ${buttonMutualStyles}
  /* Button2的特有样式 */
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 8px 24px;
`;

4. 导出组件给客户端使用：

export { Button1, Button2 };

方法二：创建基础按钮组件，其他按钮继承 #

如果你的按钮有统一的结构或基础样式，这种继承方式更清晰：

1. 先定义基础按钮（包含所有通用样式）：

const BaseButton = styled.button`
  margin: 3px 0.5rem;
  cursor: pointer;
`;

2. 基于基础按钮创建各类型按钮，仅添加特有样式：

const Button1 = styled(BaseButton)`
  background-color: #2196F3;
  color: #fff;
  border: none;
  padding: 8px 16px;
`;

const Button2 = styled(BaseButton)`
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 8px 24px;
`;

3. 同样导出组件即可。

可选：给客户端暴露通用类名 #

如果需要让客户端能通过类名修改通用样式，可以给基础按钮指定固定类名：

const BaseButton = styled.button.attrs({
  className: 'button-multual-css'
})`
  margin: 3px 0.5rem;
  cursor: pointer;
`;

这样生成的按钮DOM元素会带有button-multual-css类名，客户端可以直接通过这个类名覆盖通用样式。

内容的提问来源于stack exchange，提问作者Bùi Minh Huy