Why are my MUI button components displaying differently than the documentation? I have not made any external .css file or theme changes except for the ones listed. I have also installed the Roboto font and configured the typography. I want any changes I make to be applied globally.
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>
Thank you for any assistance.