LukeP LukeP - 1 month ago 13
Sass (Sass) Question

Can't theme react-toolbox navDrawer component

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

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 the Layout component

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