如何在不同文件中扩展导入的styled-component样式？

嘿，针对你想在单独文件里扩展组件样式的需求，我整理了几种不同技术栈下的常用实现方案，你可以根据自己的项目情况来选：

如果你的项目用了Sass或者Less，这是最灵活的方式之一，能轻松复用和扩展原有样式：

• 第一步：在原组件的样式文件中，把需要复用的基础样式用**占位符（Sass）或混合宏（Less）**定义出来，避免重复代码：

// 原组件样式：Button.scss
%button-base {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.primary-button {
  @extend %button-base;
  background: #007bff;
  color: white;
}

• 第二步：在新的扩展样式文件中，导入原样式文件，然后基于基础样式创建新样式，或者直接覆盖原有样式：

// 扩展样式：ButtonExtended.scss
@import './Button.scss';

// 新增危险按钮样式
.danger-button {
  @extend %button-base;
  background: #dc3545;
  color: white;
}

// 重写原有主按钮的样式（比如加阴影）
.primary-button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

如果项目没用到预处理器，原生CSS也支持跨文件导入样式，实现扩展：

• 新建扩展样式文件，用@import导入原组件的样式文件，然后添加新样式或覆盖原有规则：

// 扩展样式：ButtonExtended.css
@import './Button.css';

/* 新增大尺寸按钮样式 */
.button-large {
  padding: 12px 24px;
  font-size: 1.2rem;
}

/* 覆盖原有主按钮的背景色 */
.primary-button {
  background: #0056b3;
}

之后在组件或项目入口中，只需要引入这个扩展样式文件即可（因为它已经包含了原样式）。

如果项目用了CSS Modules（类名会被本地化，避免冲突），可以通过composes关键字复用和扩展样式：

• 原组件样式文件：

/* Button.module.css */
.base {
  padding: 8px 16px;
  border-radius: 4px;
}

.primary {
  composes: base;
  background: #007bff;
  color: white;
}

• 扩展样式文件：

/* ButtonExtended.module.css */
// 复用原样式的基础类
.base {
  composes: base from './Button.module.css';
}

// 基于基础类创建新样式
.danger {
  composes: base;
  background: #dc3545;
  color: white;
}

// 扩展原有主按钮样式
.primary {
  composes: primary from './Button.module.css';
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

之后在组件中导入这个扩展样式文件，直接使用对应的类名即可。

如果用的是CSS-in-JS方案（比如styled-components、Emotion），扩展组件样式会非常直观：

• 原组件定义：

// Button.js
import styled from 'styled-components';

export const BaseButton = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

export const PrimaryButton = styled(BaseButton)`
  background: #007bff;
  color: white;
`;

• 在扩展文件中，直接基于原组件创建新的样式组件：

// ButtonExtended.js
import { BaseButton, PrimaryButton } from './Button';
import styled from 'styled-components';

// 新增危险按钮
export const DangerButton = styled(BaseButton)`
  background: #dc3545;
  color: white;
`;

// 增强原有主按钮样式
export const EnhancedPrimaryButton = styled(PrimaryButton)`
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  
  &:hover {
    background: #0056b3;
  }
`;

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