更改所有material-ui(版本1)组件的字体系列 [英] changing font family of all material-ui(version 1) components

问题描述

我们可以用更少的代码更改material-ui组件的字体吗?我已经尝试了许多方法，但仍然无法做到.我必须更改字体系列 单独地，这确实是很多工作.还有其他方法吗?

Can we change the font family of material-ui components with less code. I have tried many ways but still, I can't able to do it. I have to change the font family individually which is really a lot of work. Are there any other ways to do that?

推荐答案

您可以执行以下操作，在material-ui @ next库中更改字体.假设您的<App />定义如下

You can change the font in material-ui@next library doing the following. Suppose in your <App /> which is defined like the following

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

在MuiThemeProvider的theme道具中，您提供以下内容:

In the theme prop for MuiThemeProvider you provide the following where

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

Then somewhere in your css or your main index.html file include this @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

有关所有参数的列表，您可以提供给createMuiTheme 默认主题参数关于更改MuiTheme的文档本身，如下所示. 主题材料UI下一步

For a list of all params you can give to createMuiTheme Default Theme Params Regarding the docs itself for changing the MuiTheme they are as follows. Themes Material UI Next

关于<Reboot />部分，您可以在此处查看文档材料UI重新启动详细信息

Regarding the <Reboot /> part you can have a look at the documentation here Material UI Reboot Details

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