如何创建绑定React组件的style对象并通过父元素控制子元素样式？

React 原生内联样式（style 属性传入对象的写法）本身不支持子元素选择器，无法直接在 applyColor 对象里定义子元素规则，你可以用以下三种纯原生方案实现需求，不需要引入任何第三方样式库：

方案1：使用原生CSS类名（最推荐） #

这是最通用、性能最好的实现方式，直接在全局CSS文件中定义父容器和子元素的关联样式即可：

1. 新增CSS规则：

/* 你项目的全局CSS文件 */
.control-style-section {
  color: red;
}
/* 直接控制所有子元素样式 */
.control-style-section p {
  font-size: 16px;
  margin: 10px 0;
}
.control-style-section h2 {
  color: darkred;
  border-bottom: 1px solid #eee;
}
.control-style-section span {
  font-weight: 500;
}

2. 给父section绑定类名，不需要用内联style：

<section className="control-style-section">
  {/* 子元素代码不需要做任何修改 */}
  <p>Paragraph</p>
  <div>
    <h2>Heading</h2>
    <span>Span</span>
  </div>
</section>

方案2：CSS变量 + 内联样式结合（想把样式逻辑写在JS里可选） #

如果你不想拆分CSS文件，希望样式逻辑都放在JS代码里，可以通过父元素定义CSS变量，子元素消费变量的方式实现父控子样式：

1. 修改applyColor对象，添加CSS变量：

const applyColor = {
  color: 'red',
  // 定义变量传递给子元素
  '--p-font-size': '16px',
  '--h2-color': 'darkred',
  '--span-weight': '500'
}

2. 子元素绑定对应变量即可：

<section style={applyColor}>
  <p style={{ fontSize: 'var(--p-font-size)' }}>Paragraph</p>
  <div>
    <h2 style={{ color: 'var(--h2-color)' }}>Heading</h2>
    <span style={{ fontWeight: 'var(--span-weight)' }}>Span</span>
  </div>
</section>

后续只要修改applyColor里的变量值，所有子元素的对应样式都会同步生效。

方案3：动态注入style标签（完全用JS管控样式） #

如果不想维护单独的CSS文件，也可以在组件内动态创建style标签写入样式规则：

import React, { useEffect } from 'react'

export const App = () => {
  useEffect(() => {
    const styleTag = document.createElement('style')
    // 支持所有原生CSS选择器语法
    styleTag.innerHTML = `
      .dynamic-control-section {
        color: red;
      }
      .dynamic-control-section p {
        font-size: 16px;
      }
      .dynamic-control-section h2 {
        color: darkred;
      }
    `
    document.head.appendChild(styleTag)
    // 组件卸载时清理避免重复插入
    return () => document.head.removeChild(styleTag)
  }, [])

  const renderData = () => {
    return (
    <>
    <section className="dynamic-control-section">
        <p>Paragraph</p>
        <div>
            <h2>Heading</h2>
            <span>Span</span>
        </div>
    </section>
    </>
    )
  }
 
  return <>
      {renderData()}
  </>
}

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