主题css选择器与React JS/Polymer

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的背景颜色根据我添加到根元素的类来改变。

PS -该项目也使用聚合物.js，这可能是影子dom的来源吗?

更新

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

Answer 1

React不做任何影子DOM特定的东西;聚合物当然可以。他们有一个关于样式的文档页面。

本文档概述了这些特性，包括[…]关于阴影DOM多边形如何应用样式的细节

Answer 2

根据Brandon的链接，我在这个网站上找到了答案:

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>