我们可以用更少的代码更改MUI组件的字体系列吗？我尝试了很多方法，但仍然无法做到。我必须单独更改字体系列，这确实是一项繁重的工作。有没有其他方法可以做到这一点？
更改所有 MUI 组件的字体系列
IT技术
reactjs
material-ui
2021-03-28 17:36:37
5个回答
您可以执行以下操作更改 material-ui@next 库中的字体。假设在你<App />的定义如下
// 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'));
在themeprops中为MuiThemeProvider您提供以下内容
const THEME = createMuiTheme({
typography: {
"fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`,
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500
}
});
然后在您css或您的主index.html文件中的某处包含此@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
对于所有参数的列表，您可以提供给createMuiTheme 默认主题参数关于更改 MuiTheme 的文档本身，它们如下所示。主题材质 UI Next
关于该<Reboot />部分，您可以查看此处的文档Material UI Reboot Details
****更新*****
添加到 Adeel 接受的答案中。
对于最新的 Material-UI(v4+) 组件，导入以及MuiThemeProvider已更改。
因此，现在在您的 中App.js，执行以下操作：
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;
例如，现在我添加了Nunito字体。因此，我必须通过以下方式将相同的内容添加到App.css（正在导入App.js）中：
@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;
}
这是现在的首选方法：
const theme = createMuiTheme({
typography: {
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
});
希望这可以帮助某人......在声明您的样式时，您需要非常小心逗号和括号 createMuiTheme
这真的很容易搞砸。例如，调色板是一个大对象......排版也是如此，确保一切都在正确的位置。由于做错了这件事，我遇到了一些随机问题。
palette: {
primary: {
light: '#ff8e8c',
main: '#ff5a5f',
dark: '#c62035',
contrastText: '#fff',
},
secondary: {
light: '#4da9b7',
main: '#017a87',
dark: '#004e5a',
contrastText: '#000',
},
},
typography: {
fontFamily: "'Montserrat', sans-serif",
textTransform: "none",
button: {
textTransform: "none",
},
在MUI v5 中，您可以轻松更新fontFamily所有Typography变体的或任何其他 CSS 属性：
const theme = createTheme({
typography: {
allVariants: {
fontFamily: 'serif',
},
},
})
要fontFamily在您的应用程序中动态更改，您可以使用useMemo来theme根据最新fontFamily值创建一个新对象：
const defaultFontFamily = 'serif';
const [fontFamily, setFontFamily] = React.useState(defaultFontFamily);
const theme = React.useMemo(
() =>
createTheme({
typography: {
allVariants: { fontFamily },
},
}),
[fontFamily],
);
return (
<div>
<Select
defaultValue={defaultFontFamily}
onChange={(e) => setFontFamily(e.target.value)}
>
<MenuItem value="serif">serif</MenuItem>
<MenuItem value="sans-serif">sans-serif</MenuItem>
</Select>
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
</div>
);
现场演示
