Material-UI 自定义主题

Question

我想创建一个自定义主题并自定义一些 Material-UI 组件。我遵循了 Material-UI 提供的这个 customization tutorial。有了这个，我能够做到以下几点：

创建服装主题：

//MUI THEMING
import {
  createMuiTheme,
  makeStyles,
  ThemeProvider,
} from "@material-ui/core/styles";

import Theme from "./../../theme";

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: Theme.palette.primary.main,
  },
}));

const theme = createMuiTheme({
  normal: {
    primary: Theme.palette.primary.main,
    secondary: Theme.palette.secondary.main,
  },
});

使用服装主题：

 <ThemeProvider theme={theme}>
    <AppBar
      position="static"
      classes={{
        root: classes.root,
      }}>
      ...
    </AppBar>
  </ThemeProvider>

正如预期的那样，这导致了彩色服装 AppBar：

但是，当我尝试对底部导航进行同样的操作时，-试图更改默认的原色-，我无法让它工作。我认为根据教程，我必须在创建它们时使用 "&$selected": 才能使其正常工作，但即使这样我最好的结果也是这样的：

如何更改 Bottom Navigation with no label 的原色？

旁注：在寻找解决方案时，我偶然发现了 default theme ovject。我如何访问它，如何覆盖它？

Answer 1

在我的项目中，我创建了一个全局 MUI 主题来覆盖默认主题。在makeStyle你可以像这样在回调函数中传递一个主题参数来获取整个MUI主题对象：

const useStyles = makeStyles(theme => {
  console.log(theme) // print mui global theme object
  return {...your classes here}
})

之后，将此对象复制到一个新文件，如muiTheme.js，以创建您自己的主题。在此对象中更改您要覆盖的这些值。

// muiTheme.js

import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
 breakpoints: {
  keys: ['xs', 'sm', 'md', 'lg', 'xl'],
  values: {
   xs: 0,
   sm: 600,
   md: 960,
   lg: 1280,
   xl: 1920,
  },
 },
  ...
})

export default theme

然后，在 index.js 中，使用 ThemeProvider 覆盖 MUI 的主题。

import { ThemeProvider } from '@material-ui/core/styles'

import muiTheme from './theme/muiTheme'

import App from './App'

const Root = () => (
 <BrowserRouter>
  <ThemeProvider theme={muiTheme}>
    <App />
  </ThemeProvider>
 </BrowserRouter>
)

ReactDOM.render(<Root />, document.getElementById('root'))

Material-UI 自定义主题

Material-UI custom theming

themes

reactjs

material-ui