2

我正在处理一个使用 ReactJS 的项目，我想修改主题。我在为我的主题样式编写 css 选择器时遇到了问题。看起来 reactjs 使用了一些影子 dom，它打破了跨组件的 css 选择器。看起来聚合物使用 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>

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

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

更新

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

4

2 回答 2

2

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

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

于 2014-06-02T16:40:50.750 回答
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>
于 2014-06-02T16:55:48.993 回答