React组件中如何扩展已引入CSS模块的元素样式？

原写法错误原因：className仅支持接收空格分隔的类名字符串，直接传入JS样式对象会被序列化为[object Object]，属于无效类名，额外样式完全不生效。

根据额外样式的定义形式，选对应实现方案即可：

• 组件内以JS对象形式定义的额外样式（如示例中的optionalStyles）：将CSS模块类绑定到className，JS样式对象绑定到元素原生style属性即可。内联样式优先级高于CSS类，能正常覆盖基础样式：

import style from './styles.module.css';

const optionalStyles = {
  margin: "30px"
}

<p className={style.subtitle} style={optionalStyles}>42</p>

• 额外样式为CSS类（包含CSS模块内其他类、全局类、条件触发类）：直接在className中拼接类名字符串即可，带多条件判断的复杂场景可以用clsx类名工具简化逻辑，避免出现多余空格、无效类名的问题：

import style from './styles.module.css';
import clsx from 'clsx';

// 引入CSS模块中定义的额外样式类
const optionalMarginClass = style.largeMargin;

// 简单场景：模板字符串直接拼接
<p className={`${style.subtitle} ${optionalMarginClass}`}>42</p>

// 复杂条件场景：clsx按条件加载类
<p className={clsx(style.subtitle, {
  [optionalMarginClass]: showLargeMargin // 仅当showLargeMargin为true时加载该类
})}>42</p>

避坑提示：所有非字符串格式的类名集合（对象、数组）都不能直接传入className，必须先转成空格分隔的字符串格式；JSX元素的style属性仅接收驼峰命名的JS样式对象，不要传入CSS字符串。

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