React中如何基于父标签为子标签添加CSS样式？

先明确你原代码的核心问题：

• React的内联style属性只能接受单个元素的样式对象，完全不支持CSS选择器（比如h2、span）和嵌套语法（& span），style只会作用于当前绑定的元素，没法直接选中子元素。
• 样式对象里的属性分隔必须用逗号，你原代码中fontSize: '20px';用分号的写法是语法错误。

下面给出两种可行的解决方案：

方案1：用CSS/CSS模块（推荐，适配动态子元素） #

这种方式和常规CSS写法一致，能自然选中父元素下的所有子span，不管子元素是静态写死还是动态生成的。

先创建CSS模块文件（比如Main.module.css，避免全局样式污染）：

.h2Container {
  font-size: 20px;
  color: black;
}
.h2Container span {
  color: white;
}

然后在组件中导入使用：

import React from 'react';
import styles from './Main.module.css';

const Main = ({ children }) => {
  return (
    <h2 className={styles.h2Container}>Hello{children}</h2> 
  );
}

// 使用示例，动态传入的span也会自动应用样式
// <Main><span>Test</span><span>动态加载的内容</span></Main>
export default Main;

方案2：用内联样式（适合必须用内联的场景） #

如果一定要用内联样式，需要给父元素和子元素分别绑定样式对象，动态子元素可以通过React.Children.map批量处理：

import React from 'react';

// 定义父元素和子元素的样式对象
const h2Style = {
  fontSize: '20px',
  color: 'black'
};
const spanStyle = {
  color: 'white'
};

const Main = ({ children }) => {
  // 遍历子元素，给所有span标签添加样式
  const styledChildren = React.Children.map(children, child => {
    if (child.type === 'span') {
      return React.cloneElement(child, { style: spanStyle });
    }
    return child;
  });

  return (
    <h2 style={h2Style}>Hello{styledChildren}</h2> 
  );
}

export default Main;

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