reactjs - changing font family of all material-ui(version 1) components

Question

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?

Answer 1

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

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

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

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

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