React-toolbox: Can't theme the nav drawer

[L-u-k-e]

I'm trying to change the background color of the NavDrawer component, but I've spent about 2 hours now trying every possible combination of classes to no avail. I need to style the inner .drawerContent div, not the .navDrawer div

First I simply had:

//theme.scss
.drawerContent {
  background-color: blue
}

// TestTheme.js
import React from 'react';
import { Layout, NavDrawer, Panel } from 'react-toolbox';
import theme from './theme.scss';

const TestTheme = () => (
  <Layout>
    <NavDrawer
      theme={theme}
    >
      Some Content Here
    </NavDrawer>
    <Panel></Panel>
  </Layout>
);

export default TestTheme;

Then, following the lead of issue #688, I tried:

//theme.scss
.root.navDrawer {
  .drawerContent {
    background-color: blue
  }
}

// TestTheme.js
import React from 'react';
import { Layout, NavDrawer, Panel } from 'react-toolbox';
import theme from './theme.scss';

const TestTheme = () => (
  <Layout>
    <NavDrawer
      className={theme.root}
      theme={theme}
    >
      Some Content Here
    </NavDrawer>
    <Panel></Panel>
  </Layout>
);

export default TestTheme;

In both cases, nothing happens to the drawer content, though I can see that in the second case, the .navDrawer is indeed getting the .root class applied.

For clarity, this does not seem to be an issue where the css properties are being applied, but don't take precedence. I am looking at the classes in dev tools and the only class being given to the .drawerContent div is the default theme. It looks like the class name of my theme isn't even being appended.

can anyone help?

[rubenmoya]

Hi! I gave it a try, for it to work you have to add the theme to the layout instead of the NavDrawer, and use this in the css:

.layout {
  .navDrawer {
    .drawerContent {
      background-color: blue;
    }
  }
}

[L-u-k-e]

Thanks a lot, that works!

[zdJOJO]

What's the rule of custom themes? I do not understand at all！ I've spent about 2 days in customizing components ! so hard , help !

:( @rubenmoya