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

我正在尝试将自定义主题应用于我的React应用程序。我已尝试按照上的说明进行操作，并得出以下结论：

这是我的

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();

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
输入‘字体机器人’；
从“./components/NavBar”导入NavBar；
从'@material ui/core/styles'导入{createMuiTheme}；
从'@material ui/styles'导入{ThemeProvider}；
const theme=createMuiTheme({
调色板：{
主要：{
灯光：“#f44336”，
主要内容：“rgb（23105170）”，
黑暗：“#000”
},
中学：{
灯光：“#f44336”，
主要名称：“#f44336”，
},
},
排版：{
useNextVariants：真
}
});
ReactDOM.render(
//也不行
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

您的

NavBar

组件不是MaterialUI组件，它只是一个React组件

您需要将该

颜色作为道具向下传递，然后在
导航栏
组件的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

。。。
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Button”导入按钮；
常量导航栏=（{color}）=>{
...
返回(
...
//这是一个MUI组件
...
)
}
导出默认导航栏
请显示导航栏的代码。这也将有助于你提供一个复制你的问题。