更改所有MUI组件的字体系列 [英] Changing font family of all MUI components

问题描述

我们可以用更少的代码更改MUI组件的字体系列吗？我试过很多方法，但还是做不到。我必须更改字体系列 个别的，这真的是很大的工作量。有没有其他方法可以做到这一点？

推荐答案

您可以执行以下操作更改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'));

在themeMuiThemeProvider的道具中，您提供了以下内容

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');

有关更改MuiTheme的文档本身，createMuiThemeDefault Theme Params可以给createMuiThemeDefault Theme Params提供所有参数的列表如下所示。Themes Material UI Next

关于<Reboot />部分，您可以查看此处的文档Material UI Reboot Details

这篇关于更改所有MUI组件的字体系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！