ThemeProvider 未申请

Question

我今天刚开始使用 Material UI。到目前为止，我未能将主题应用于我的 react-app，而且我不明白为什么......我没有任何错误消息。我检查了材料 UI 网站上的示例，它似乎相同......欢迎任何想法:(

这是我的代码： index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'fontsource-roboto';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme.js'

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter> 
        <ThemeProvider theme={theme}> 
          <App />
        </ThemeProvider>
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

theme.js

import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';
// A custom theme for this app

const theme = createMuiTheme({
  palette: {
    primary: {
       type:"dark",
      main: '#115293',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#115293',
    },
  },
  typography: {
     fontFamily: 'Arial',
  }
});

export default theme;

感谢您的时间和耐心，在我这边一定是一个非常愚蠢的错误è_é

Answer 1

您必须添加 CssBaseline，没有它某些样式将无法使用：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from './theme.js'

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter> 
        <ThemeProvider theme={theme}> 
          <CssBaseline />
          <App />
        </ThemeProvider>
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);