react-toolbox / react-toolbox

A set of React components implementing Google's Material Design specification with the power of CSS Modules
http://www.react-toolbox.io
MIT License
8.66k stars 971 forks source link

Theme priority via react-css-themr #1017

Closed iamyardem closed 7 years ago

iamyardem commented 7 years ago

Hello. I've tried to apply theme via react-css-themr. But I found that default theme's classes apply first, therefore default classes have more priority. To fix it I need either use !important or write more specific selectors. For example, I wrote following styles for input highlight bar.

  .bar {
    &:after, &:before {
      background-color: #c2c2c2;
    }

But it works only if I wrap it in div to make it more specific.

div {
  .bar {
    &:after, &:before {
      background-color: #c2c2c2;
    }
  }
}

Is there any way to control priority of classes for themr approach? Can post-css autoprefixer cause such behavior?

javivelasco commented 7 years ago

Sorry there is no control over the priority. In an ideal scenario every node inside react-toolbox would be the least possible priority but this approach came later and most components has more or less priority depending on the case.

The is an upcoming refactor with a similar approach I plan to publish soon in a roadmap that will dramatically push down priority but until then you must write selectors with the same or higher priority in order to override. Sorry :(