MUI two AppBar in the same page as component = 'header' and component = 'footer'. How to override styles using createTheme()?

user_2409545 0
Viewed 181

Having two appBars components in the same page is a good approach (one as header and the other one as footer)? Besides, I am using the MUI createTheme to override some styles. I am doing this to override the appBar component.

components: { ...
MuiAppBar: {
      styleOverrides: {
        root: {
          minHeight: '4.375rem',
          backgroundColor: appColors.aqua600,
        },
      },
    }, ...

This works fine, but as was wondering how could I override the style of an AppBar that is renders as 'header' and style the other appBar that is rendered as 'footer'

The component usage:

<AppBar
        component="header | footer" ...
</AppBar>

I know that can be easily done with CSS, but I was wondering if this can be done using the createTheme from MUI?

material-ui
1 Answers

It can be done by overriding styles based on props using ownerState.

Overrides based on props You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.

The ownerState prop is a combination of public props that you pass to the component + internal state of the component.

You can check more on docs.

So, the custom theme for MuiAppBar should be something like this:

components: {
    MuiAppBar: {
      styleOverrides: {
        root: ({ ownerState }) => {
          return {
            ...(ownerState.component === "header" && {
              backgroundColor: "#202020"
            })
          };
        }
      }
    }
  }
user_47740450
Related