主题css选择器与React JS / Polymer [英] Theme css selectors with React JS/Polymer

问题描述

我正在使用一个使用ReactJS的项目，我想修改主题。我遇到了一个问题，编写css选择器为我的主题样式。 看起来reactjs使用一些阴影dom，它打破了组件之间的css选择器。看起来像聚合物使用阴影dom，它破坏组件之间的css选择器（按设计）。

 < div id =rootclass =light-theme> 
< style> 
 .light-theme .bg-theme {
 background-color：white; 
} 
< / style> 
< parent-element> 
< child-element class =bg-theme> 
< / child-element> 
< / parent-element> 
< / div> 
  

我想为子元素

PS - 项目也使用polymer.js，这可以是

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

解决方案

React不做任何shadow DOM特定的东西;聚合物最肯定。他们关于样式的文档页面。

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

I'm working with a project that uses ReactJS and I'd like to modify the theme. I'm running into an issue writing the css selectors for my theme styles. It looks like reactjs uses some shadow dom which breaks css selectors across components. It looks like polymer uses shadow dom which breaks css selectors across components (by design).

<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>

I'd like for the child-element's background color to change based on the class I add to the root element.

PS - The project also uses polymer.js, could this be the source of the shadow dom?

Update

After some research, and see one of the answers below, polymer is indeed the cause of the shadow dom.

解决方案

React doesn't do any shadow DOM specific stuff; Polymer most certainly does. They have a documentation page on styling.

This document outlines those features, including [...] the specifics on how the the Shadow DOM polyfill applies styles

这篇关于主题css选择器与React JS / Polymer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！