React Mui Appbar 主题化

Question

我试过主题化 MUI AppBar，但我对主题化一无所知。我可以在不使用带样式的组件或其他样式的情况下为带有主题的 AppBar 设置样式吗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>
  )
}

Answer 1

你的 codesandbox 工作。

如果需要添加特定样式，请使用 sx 道具。 https://mui.com/system/the-sx-prop/

您也可以覆盖主题的样式：https://mui.com/customization/theme-components/#heading-global-style-overrides

React Mui Appbar 主题化

React Mui Appbar theming

appbar

reactjs

material-ui

themeprovider