如何在不使用!important的情况下覆盖SCSS组件样式？

方法1：降低默认样式优先级 #

直接修改SCSS，用:where()伪类降低组件默认类的优先级，这样传入的普通类选择器就能轻松覆盖它：

// component.scss
:where(.component) {
  margin: 0;
}

:where()的优先级为0，任何后续传入的类选择器（优先级10）都能覆盖默认样式，完全不需要!important。

方法2：用CSS变量实现可配置样式 #

把组件的可定制样式抽成CSS变量，用户既可以通过className也可以直接通过style属性修改，是组件库常用的灵活方案：

// component.scss
.component {
  margin: var(--component-margin, 0); // 默认值为0，用户可自定义
}

用户使用时，两种方式修改：

1. 通过自定义className覆盖变量：

.custom-margin {
  --component-margin: 1rem;
}

2. 直接通过组件的style属性传递：

<Component style={{ '--component-margin': '1rem' }} />

方法3：优化组件结构，拆分样式职责 #

将基础样式、预设变体样式和用户自定义样式分层，同时保证用户传入的className处于优先级链的末端：

// Component.jsx
import React from 'react';
import classNames from 'classnames';
import './component.scss';

const Component = React.forwardRef(({ className, variant, ...rest }, ref) => {
  const baseClasses = classNames('component', {
    [`component--${variant}`]: variant // 支持预设样式变体
  });
  // 用户className放在最后，相同权重下后加载的样式生效
  const finalClasses = classNames(baseClasses, className);

  return (
    <div ref={ref} className={finalClasses} {...rest} />
  );
});

对应的SCSS保持选择器简洁，避免嵌套过深：

.component {
  margin: 0;
}

.component--large {
  margin: 2rem;
}

注意：确保用户的自定义样式在组件样式之后加载，相同权重的选择器，后加载的会生效。

额外提示 #

避免在组件默认样式中使用ID选择器、嵌套过深的选择器（比如.container .component），这些会大幅提升优先级，让用户难以覆盖。保持默认样式的选择器尽可能简单（仅用单一类名），是降低覆盖成本的关键。

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