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'))