React自定义组件className样式覆盖问题及可靠实现方案问询

自定义Box组件使用CSS Modules，期望用户传入className即可覆盖默认样式，但当前基础样式始终无法被覆盖，仅基础类中未定义的样式能生效。调整App.js中样式导入顺序（将App样式放在Box组件导入之后）可临时让背景变红，但需要一种不依赖导入顺序的可靠扩展方案。

现有代码 #

Box.js #

import styles from "./Box.module.css";

const Box = ({ className }) => {
  const classnames = [styles.base, className].join(" ").trim();
  return <div className={classnames}></div>;
};

export default Box;

Box.module.css #

.base {
  height: 25rem;
  width: 25rem;
  background-color: blue;
}

App.js #

import styles from "./App.module.css";
import Box from "./components/Box";

function App() {
  return (
    <div>
      <Box className={styles.red} />
    </div>
  );
}

export default App;

App.module.css #

.red {
  background-color: red;
}

CSS Modules会将类名编译为唯一哈希类，当基础类和用户传入类对同一CSS属性的优先级相同时，样式表的导入顺序决定最终生效样式——后导入的样式表优先级更高。依赖导入顺序的方案不可靠，用户的代码结构随时可能改变。

方案1：降低基础样式优先级（推荐） #

用CSS的:where()伪类包裹基础类，:where()的优先级为0，无论导入顺序如何，用户传入的类（优先级至少为1）都会自动覆盖基础样式。

修改Box.module.css：

:where(.base) {
  height: 25rem;
  width: 25rem;
  background-color: blue;
}

无需修改其他代码，用户传入的red类的背景色会直接生效。

方案2：使用CSS变量（灵活扩展） #

在基础样式中定义CSS变量，用户通过自定义类修改变量值，这种方式支持多属性的定制扩展，灵活性更强。

修改Box.module.css #

.base {
  height: 25rem;
  width: 25rem;
  /* 设默认值为blue，用户可通过自定义类覆盖变量 */
  background-color: var(--box-bg, blue);
}

修改App.module.css #

.red {
  --box-bg: red;
}

后续还可以扩展更多变量（比如边框、内边距等），让组件的可定制性进一步提升。

方案3：合并内联样式（应急方案） #

如果需要更高优先级的样式，可让组件接受style属性并合并到元素上。内联样式优先级高于类选择器，但灵活性较差，适合临时需求。

修改Box.js：

import styles from "./Box.module.css";

const Box = ({ className, style }) => {
  const classnames = [styles.base, className].join(" ").trim();
  return <div className={classnames} style={style}></div>;
};

export default Box;

使用示例：

<Box style={{ backgroundColor: "red" }} />

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