使用React JS / Polymer的主题css选择器-Java 学习之路

我'm working with a project that uses ReactJS and I'喜欢修改主题 . 我遇到了为我的主题样式编写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 - 该项目还使用了polymer.js，这可能是影子dom的来源吗？

Update

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

2 回答

1

React没有做任何影子DOM特定的东西;聚合物肯定会 . 他们有a documentation page on styling .

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

回复于 2024-04-28T07:40:25+08:00
2
按照Brandon的链接，我在这个网站上找到了答案：

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

/ deep / combinator类似于:: 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>
```
回复于 2024-04-28T07:40:25+08:00

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

2 回答

相关问题