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

【问题标题】：material ui (mui) button have incorrect styling材质 ui (mui) 按钮的样式不正确
【发布时间】：2022-02-09 17:19:43
【问题描述】：

为什么我的 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>

感谢您的帮助

【问题讨论】：

i.stack.imgur.com/XEdAT.png

标签： javascript css reactjs material-ui

【解决方案1】：

你是不是错过了按钮所在组件内部的导入？

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

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

【讨论】：

这是 App.js 不是我调用 Button 的地方，而且 MuiButton 也不起作用
@KareemEtefy 提供您使用按钮的组件代码