¿Podemos cambiar la familia de fuentes de los componentes MUI con menos código? Lo he intentado de muchas maneras, pero aún así, no puedo hacerlo. Tengo que cambiar la familia de fuentes individualmente, lo que es realmente mucho trabajo. ¿Hay otras formas de hacerlo?
Puede cambiar la fuente en la biblioteca material-ui@next haciendo lo siguiente. Supongamos que en su <App /> que se define como la siguiente
// Material UI import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; const App = () => ( <MuiThemeProvider theme={THEME}> <Provider store={store}> <Router history={appHistory} routes={Routes} /> </Provider> </MuiThemeProvider> ); ReactDOM.render(<App />, document.getElementById('app')); En el accesorio de theme para MuiThemeProvider , proporciona lo siguiente donde
const THEME = createMuiTheme({ typography: { "fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`, "fontSize": 14, "fontWeightLight": 300, "fontWeightRegular": 400, "fontWeightMedium": 500 } }); Luego, en algún lugar de su css o de su archivo index.html principal, incluya esta @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
Para obtener una lista de todos los parámetros que puede dar a createMuiTheme Parámetros de tema predeterminados Con respecto a los documentos en sí para cambiar el MuiTheme, son los siguientes. Temas Material UI Siguiente
Con respecto a la parte <Reboot /> , puede consultar la documentación aquí Material UI Reboot Details
**** ACTUALIZACIONES ****
Agregando a la respuesta aceptada por Adeel.
Para los últimos componentes de Material-UI (v4+), se han cambiado las importaciones, así como MuiThemeProvider .
Así que ahora en su App.js , haga lo siguiente:
import { createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import './Styles/App.css'; const theme = createMuiTheme({ typography: { fontFamily: [ 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif' ].join(','), } }); class App extends Component { render() { return ( <ThemeProvider theme={theme}> <div className="App"> <MainApp /> </div> </ThemeProvider> ); } } export default App; Ahora, por ejemplo, he agregado la fuente Nunito . Así que tuve que agregar lo mismo a App.css (que se está importando en App.js ) de la siguiente manera:
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }En MUI v5, también asegúrese de que ThemeProvider y createTheme se importen desde @mui/material/styles y no desde @mui/styles . Estuve atascado durante horas pensando por qué no funciona.
import { ThemeProvider, createTheme } from '@mui/styles'; ❌ import { ThemeProvider, createTheme } from '@mui/material/styles'; ✅ const theme = createTheme({ typography: { allVariants: { fontFamily: 'serif', textTransform: 'none', fontSize: 16, }, }, }); function App() { return ( <ThemeProvider theme={theme}> ... </ThemeProvider> ); }