изменение семейства шрифтов всех компонентов material-ui (версия 1)

Ответ 1

Вы можете изменить шрифт в материале-ui @следующей библиотеке, выполнив следующее. Предположим, что в вашем <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'));

В theme prop для 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 Default Theme Params Что касается самих документов для изменения MuiTheme, они выглядят следующим образом. Темы Материал UI Next

Что касается части <Reboot/> вы можете ознакомиться с документацией здесь. Материал UI Reboot Details

Ответ 2

Теперь это предпочтительный метод:

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(','),
  },
});

Как отмечено здесь: https://material-ui.com/customization/typography/

Ответ 3

Надеясь, что это может помочь кому-то... вы должны быть очень осторожны с запятыми и скобками при объявлении ваших стилей в 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",

  },

Ответ 4

**** ОБНОВЛЕНИЯ *****

Добавление к принятому ответу Адел.

Для последних компонентов 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;
}