使用CSS Modules时能否为同一个React组件应用不同的CSS样式？

以下是三种可直接落地的灵活实现方式，不需要剥离原有组件的基础CSS：

方案1：透传自定义className实现样式覆盖 #

给组件新增可选的自定义类名props，和原有默认类名拼接即可，利用CSS优先级覆盖需要调整的样式，不需要改动原有基础样式。

修改后的组件代码 #

import React from "react";
import styles from "./index.module.css";
import { Link } from "react-router-dom";

// 新增三个可选类名props，分别对应三层元素的自定义样式
const GlowingButton = ({ title, path, wrapperClassName, buttonClassName, glowClassName }) => {
  return (
    <div className={`${styles.buttonWrapper} ${wrapperClassName || ''}`}>
      <Link className={`${styles.button} ${buttonClassName || ''}`} to={path}>
        <button className={`${styles["glow-on-hover"]} ${glowClassName || ''}`}>{title}</button>
      </Link>
    </div>
  );
};

export default GlowingButton;

使用示例 #

在父组件的CSS文件中写需要覆盖的样式，比如调整按钮宽度：

/* 父组件的module.css */
.smallGlowBtn {
  width: 200px;
  height: 40px;
}

父组件调用时传入对应类名即可：

import parentStyles from './parent.module.css'
// ...
<GlowingButton 
  title="小尺寸按钮"
  path="/test"
  glowClassName={parentStyles.smallGlowBtn}
/>

如果有多个类名动态判断的需求，可以引入clsx工具库处理类名拼接，逻辑更简洁。

方案2：透传内联样式处理动态调整 #

如果是临时修改个别不需要复用的属性，可以直接透传style对象，不需要额外写CSS类。

修改后的组件代码 #

const GlowingButton = ({ title, path, wrapperStyle, buttonStyle, glowStyle }) => {
  return (
    <div className={styles.buttonWrapper} style={wrapperStyle}>
      <Link className={styles.button} to={path} style={buttonStyle}>
        <button className={styles["glow-on-hover"]} style={glowStyle}>{title}</button>
      </Link>
    </div>
  );
};

使用示例 #

<GlowingButton 
  title="自定义圆角按钮"
  path="/test"
  glowStyle={{width: '300px', borderRadius: '20px'}}
/>

方案3：CSS变量实现配置化样式 #

如果组件需要对外暴露多个可自定义的样式属性，推荐用CSS变量方案，不需要覆盖原有样式，直接修改变量值即可，维护成本最低。

第一步：修改CSS文件，把可配置属性换成CSS变量 #

/* index.module.css */
.glow-on-hover {
  /* 用CSS变量定义可配置属性，后面的值是默认值 */
  width: var(--glow-btn-width, 400px);
  height: var(--glow-btn-height, 50px);
  border-radius: var(--glow-btn-radius, 10px);
  background: var(--glow-btn-bg, #111);
  /* 其余原有样式保持不变 */
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
/* 其余所有样式保持不变 */

第二步：使用时直接修改变量值 #

可以通过父类统一定义：

/* 父组件的css */
.customBtnGroup {
  --glow-btn-width: 250px;
  --glow-btn-radius: 5px;
}

也可以直接通过style属性传入变量：

<GlowingButton 
  title="自定义尺寸按钮"
  path="/test"
  glowStyle={{'--glow-btn-width': '180px', '--glow-btn-height': '45px'}}
/>

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