Search code examples
reactjsmaterial-uiappbarthemeprovider

React Mui Appbar theming

I tried theming MUI AppBar but I have no idea about theming. Can I style an AppBar with theme without using styled component or other style api?

palette.js

import { createTheme } from '@mui/material/styles';
const theme = createTheme({
    palette: {
        primary: {
            main: "#000F04"
        }
    }
});

App.js

import theme from "../../styles/palette";
import { ThemeProvider } from '@mui/material/styles';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <AppBar position="static" color="primary">
        <Toolbar>
        </Toolbar>
      </AppBar>
    </ThemeProvider>
  )
}
Solution

  • Your codesandbox work.

    Use the sx props if you need to add specific style. https://mui.com/system/the-sx-prop/

    You can too overide style on the theme: https://mui.com/customization/theme-components/#heading-global-style-overrides