React中子组件为何能访问父组件设置的样式（如App组件的ID）

在App.js中，我使用如下布局：

<div id={theme}>
    <About />
    <TechStack />
    <Education />
    <Project />
    <Contact />
</div>

在About组件的about.css文件中，我写了如下样式：

#dark .about-section{
    background-color: #38004C;
}

当App.js中{theme}的值为dark时，.about-section的背景色会改变。为何我能在about.css中定义#dark选择器，而该ID是在App组件中设置的？

回答 #

这是因为常规CSS的作用域是全局的（除非你用了CSS Modules、Styled Components这类带局部作用域的方案）。不管CSS写在哪个组件的样式文件里，最终打包后都会合并到全局样式中，作用于整个页面的DOM树。

从最终渲染的DOM结构来看，当theme值为dark时，页面的DOM层级是这样的：

<div id="dark">
    <div class="about-section">...</div> <!-- About组件渲染出的元素 -->
    <!-- 其他组件渲染的元素 -->
</div>

你的CSS规则#dark .about-section的逻辑是：匹配所有被id为dark的元素包裹、且拥有about-section类名的元素。只要这个选择器能匹配到DOM树里的对应元素，不管样式代码写在哪个文件里，都会生效——它只看最终的DOM结构，和组件的代码层级无关。

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