Can't theme react-toolbox navDrawer component

Question

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 this question and 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?

Answer 1

I came across the same problem and a contributor redirect me to this issue (all credits to them)

You have to change your theme to

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

and apply it to the Layout component

<Layout theme={theme}>
    <NavDrawer>
      Some Content Here
    </NavDrawer>
    <Panel></Panel>
  </Layout>