Theme css selectors with React JS/Polymer

问题

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.

回答1:

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

回答2:

Following Brandon's link I found the answer on this site:

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

The /deep/ combinator is similar to ::shadow, but more powerful. It completely ignores all shadow boundaries and crosses into any number of shadow trees. Put simply, /deep/ allows you to drill into an element's guts and target any node.

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

来源：https://stackoverflow.com/questions/23999041/theme-css-selectors-with-react-js-polymer