Question

我正在尝试将自定义主题应用于我的React应用。我尝试按照Material docs上的说明进行操作，并提出以下建议：

这是我的index.js，我似乎无法获得NavBar / AppBar或任何其他组件来进行这些主题更改。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'typeface-roboto';
import NavBar from './components/NavBar';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
  palette: {
     primary: {
        light: '#f44336',
        main: 'rgb(23, 105, 170)',
        dark: '#000'
     },
     secondary: {
       light: '#f44336',
       main: '#f44336',
     },
  },
  typography: { 
     useNextVariants: true
  }
});

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <NavBar color="primary" />
      //<NavBar /> does not work either
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Answer 1

您的NavBar组件不是MaterialUI组件，它只是一个React组件。

您需要将color传递为道具，然后在NavBar组件的MUI组件中使用它。

这是一个例子：

...
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';

const NavBar = ({ color }) => {
  ...
  return (
    <AppBar color={color}>
      ...
      <Button color={color} /> // This is an MUI component
      ...
    </AppBar>
  )
}

export default NavBar

如何将自定义主题应用于整个应用程序

1 个答案: