React中如何通过Props传递CSS模块化样式？当前写法无效

你现在的写法无法生效，核心原因是你传递的是字符串s.SectionsTitle，而不是CSS模块对象s的SectionsTitle属性。CSS模块导出的s是一个对象，s.SectionsTitle对应的是经过哈希处理的真实类名字符串，而你传的字符串s.SectionsTitle只是普通文本，React会把它直接作为类名渲染，自然不会匹配到样式。

正确的传递方式 #

方式1：父组件导入CSS模块后传递属性 #

如果父组件需要控制子组件的类名，首先在父组件中导入对应的CSS模块：

// 父组件文件
import React from 'react';
import s from './SectionsTitle.module.css'; // 导入同一个CSS模块
import SectionsTitle from './SectionsTitle';

const ParentComponent = () => {
  return (
    <SectionsTitle styleTitle={s.SectionsTitle} />
  );
};

这样传递的是s.SectionsTitle对应的真实类名字符串，子组件就能正确应用样式。

方式2：子组件预设类名，父组件传递标识（可选） #

如果不想让父组件依赖子组件的CSS模块，可以在子组件中预设可选类名，父组件传递标识来切换：

// 子组件 SectionsTitle.jsx
import React from 'react';
import s from './SectionsTitle.module.css';

const SectionsTitle = (props) => {
  // 根据父组件传递的标识选择类名
  const titleClass = props.titleType === 'main' ? s.SectionsTitle : s.OtherTitle;
  return (
    <div className={titleClass}>
      {props.whiteFraction}
      {/* 修复原代码的语法错误：span标签缺少属性闭合和内容渲染 */}
      <span className={props.redFractionClass}>{props.redFraction}</span>
    </div>
  );
};

export default SectionsTitle;

父组件调用时：

<SectionsTitle titleType="main" whiteFraction="标题前缀" redFraction="红色部分" redFractionClass={s.RedFraction} />

额外修复：子组件的语法错误 #

你原代码中的<span{props.redFraction}</span>存在语法错误，应该补充属性闭合（比如className）和标签内容，否则会导致React渲染失败。

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