How to modify the background color of the InsetSidebar?

[jlecren]

First of all, thanks for your library mui-treasury.

I would like to change the background color of an InsetSidebar but I can't figure out how to proceed.

Here is part of my code:

<InsetContainer rightSidebar={
                    <InsetSidebar
                      sidebarId={"appPageDrawer"}
                      classes={{ paper: styles.pageDrawer }}
                    >
...
                    </InsetSidebar>
                  }
                >

Style:

pageDrawer: {
    backgroundColor: "#fff",
  },

However, the background color seems to be overridden by a default style of the Paper component:

Then, how could I set the background color of the InsetSidebar?

[siriwatknp]

Can you provide the whole file? I guest it is the order of calling makeStyles

[jlecren]

The file won't work as this, as I didn't include some dependencies. Archive.zip

[siriwatknp]

My guest is true. You need to move style below component declaration like this

// move below get...(styled)
// import style from './style';

const Header = getHeader(styled);
const Content = getContent(styled);
const Fullscreen = getFullscreen(styled);
const InsetFooter = getInsetFooter(styled);
const InsetContainer = getInsetContainer(styled);
const InsetSidebar = getInsetSidebar(styled);
const DrawerSidebar = getDrawerSidebar(styled);
const SidebarContent = getSidebarContent(styled);
const CollapseBtn = getCollapseBtn(styled);

import style from './style';

Ideally, you should import style from './style'. I will create a fix version for this issue.