Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to modify the background color of the InsetSidebar? #921

Open
jlecren opened this issue Aug 6, 2020 · 3 comments
Open

How to modify the background color of the InsetSidebar? #921

jlecren opened this issue Aug 6, 2020 · 3 comments
Labels
bug good first issue Good for newcomers

Comments

@jlecren
Copy link

jlecren commented Aug 6, 2020

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:
Capture d’écran 2020-08-05 à 19 27 18

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

@siriwatknp
Copy link
Owner

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

@jlecren
Copy link
Author

jlecren commented Aug 6, 2020

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

@siriwatknp
Copy link
Owner

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.

image

@siriwatknp siriwatknp added bug good first issue Good for newcomers labels Aug 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants