材质ui(mui)按钮的样式不正确

Question

为什么我的MUI按钮组件看起来像这样而不是像文档除了列出的外，没有任何外部.css文件或主题更改我也安装了roboto字体，并正在进行排版工作我希望我所做的任何改变都是全球性的

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import "./index.css";
import Home from "./views/Home";
import Login from "./views/Login";
import Register from "./views/Register";
const theme = createTheme({
components: {
Button: {
defaultProps: {
fontSize: 1000,
},
},
},
});
const App = () => {
return (
<>
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Home />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</>
);
};
export default App;

<Button variant="contained" style={{ width: 150, height: 50 }}>
I'm a Doctor
</Button>

感谢的帮助

Answer 1

按钮所在的组件内部是否缺少导入？

import { Button } from '@mui/material';

我认为主题的语法是错误的，应该在components条目中使用MuiButton而不是Button。