带有 React JS/Polymer 的主题 css 选择器

Posted 2023-03-06

【中文标题】带有 React JS/Polymer 的主题 css 选择器

【英文标题】：Theme css selectors with React JS/Polymer

【发布时间】：2014-07-22 20:05:17

【问题描述】：

我正在处理一个使用 ReactJS 的项目，我想修改主题。我在为我的主题样式编写 css 选择器时遇到了问题。 看起来 reactjs 使用了一些 shadow 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 的原因。

【参考方案1】：

React 不做任何影子 DOM 特定的东西；聚合物当然可以。他们有a documentation page on styling。

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

【讨论】：

感谢您的链接，我从那里找到了答案

【参考方案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>