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

Question

我正在一个使用ReactJS的项目中，我想修改主题。 我在为主题样式编写CSS选择器时遇到问题。 看起来Reactjs使用了一些影子dom，这会破坏跨组件的CSS选择器。 似乎聚合物使用阴影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>

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

PS-该项目还使用polymer.js，这可能是影子dom的来源吗？

更新

经过一番研究，并看到下面的答案之一，聚合物确实是阴影域的原因。

Answer 1

React不会做任何影子DOM特定的工作； 聚合物当然可以。 他们有关于样式的文档页面 。

本文档概述了这些功能，包括有关Shadow DOM polyfill如何应用样式的细节。

Answer 2

通过布兰登的链接，我在此站点上找到了答案：

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

/deep/组合器类似于::shadow ，但功能更强大。 它完全忽略所有阴影边界，并穿过任意数量的阴影树。 简而言之， /deep/允许您深入元素的胆量并以任何节点为目标。

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