ThemeProvider不适用

Question

我今天刚开始使用material UI。到目前为止，我没有将主题应用到我的react-app上，我看不出原因……我没有任何错误消息。我检查了material 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')
);