[英]material ui (mui) button have incorrect styling
why do my MUI button components look like this instead of like the docs no external.css file or theme changes besides the ones listed I have the roboto font installed as well and working on the typography I want whatever changes I make to be global为什么我的 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>
thanks for any help谢谢你的帮助
Aren't you missing an import inside the component where the button is?您是否缺少按钮所在组件内的导入?
import { Button } from '@mui/material';
And I think the syntax for themes is wrong, you should be using MuiButton
instead of Button
inside components
entry.而且我认为主题的语法是错误的,您应该在components
条目中使用MuiButton
而不是Button
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.