¿Por qué los componentes de mi botón MUI se ven así en lugar de como los documentos? Ningún archivo .css externo o cambios de tema además de los enumerados También tengo la fuente roboto instalada y trabajando en la tipografía Quiero que los cambios que haga sean globales
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>Gracias por cualquier ayuda
¿No te falta una importación dentro del componente donde está el botón?
import { Button } from '@mui/material'; Y creo que la sintaxis de los temas es incorrecta, debería usar MuiButton en lugar de Button dentro de la entrada de components .