我们可以用更少的代码来更改 Material UI 组件的字体系列吗?我尝试了很多方法,但仍然无法做到。我必须单独更改字体系列,这确实是一项艰巨的工作。还有其他方法可以做到这一点吗?
是的,您可以通过自定义主题全局更改所有 Material-UI 组件的字体系列。Material-UI 的主题解决方案允许您为所有组件指定全局样式,包括排版。
下面介绍了如何使用新字体系列创建自定义主题并将其应用到您的应用程序:
npm install @mui/material @emotion/react @emotion/styled
createTheme
ThemeProvider
``` // src/theme.js import { createTheme } from ‘@mui/material/styles’;
const theme = createTheme({ typography: { fontFamily: ‘YourFontFamily, Arial, sans-serif’, }, });
export default theme; ```
``` // src/index.js or src/App.js import React from ‘react’; import ReactDOM from ‘react-dom’; import { ThemeProvider } from ‘@mui/material/styles’; import CssBaseline from ‘@mui/material/CssBaseline’; import App from ‘./App’; import theme from ‘./theme’;
ReactDOM.render( , document.getElementById(‘root’) ); ```
<link>
<!-- public/index.html --> <link href="https://fonts.googleapis.com/css2?family=YourFontFamily:wght@400;700&display=swap" rel="stylesheet">
或者,您可以在主 JS 或 CSS 文件中导入它:
``` // src/index.js or src/App.js import ‘./index.css’; // if you put your font import in a CSS file
// src/index.css @import url('https://fonts.googleapis.com/css2?family=YourFontFamily:wght@400;700&display=swap’); ```
通过执行这些步骤,您将使用最少的代码在应用程序中的所有 Material-UI 组件中全局更改字体系列。这种方法非常高效,并利用 Material-UI 的主题功能来确保整个应用程序的一致性。