css - 使用 React JS/Polymer 的主题 css 选择器

Question

我正在处理一个使用 ReactJS 的元素，我想修改主题。我在为我的主题样式编写 css 选择器时遇到问题。 看起来reactjs使用了一些shadow dom，它打破了组件之间的css选择器。它看起来像polymer使用了shadow dom，它打破了组件之间的css选择器(按设计)。

<div id="root" class="light-theme">
  <style>
    .light-theme .bg-theme {
      background-color: white;
    }
  </style>
  <parent-element>
    <child-element class="bg-theme">
    </child-element>
  </parent-element>
</div>

我希望子元素的背景颜色根据我添加到根元素的类进行更改。

PS - 该元素还使用了polymer.js，这可能是shadow dom的来源吗？

更新

经过一番研究，并看到下面的答案之一， polymer 确实是 Shadow dom 的原因。

Answer 1

React 不做任何影子 DOM 特定的事情； polymer 肯定可以。他们有a documentation page on styling .

This document outlines those features, including [...] the specifics on how the the Shadow DOM polyfill applies styles