Изменить семейство шрифтов Material-UI

Question

Я пытаюсь изменить семейство шрифтов в Material-UI. Я пытаюсь установить его для всего проекта, используя MuiTheme. Как я могу сделать это, используя шрифт из Google Fonts?

Answer 1

Кто-то сделал это в другой теме

import { createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import createTypography from 'material-ui/styles/typography';

const theme = createMuiTheme({
  typography: createTypography(createPalette(), {
  fontFamily: '"Comic Sans"',
  })
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>

Answer 2

Сначала выберите шрифт Google, который вы хотите использовать, и импортируйте его в свой проект. Вы можете сделать это, добавив ссылку на CSS-файл Google Fonts в раздел вашего HTML-файла или используя такой пакет, как google-fonts-loader, для динамического импорта шрифта в ваш код.

После импорта шрифта вы можете создать новый объект MuiTheme с помощью функции createMuiTheme(), предоставляемой Material-UI.

В объекте MuiTheme вы можете указать семейство шрифтов, которое будет использоваться для различных компонентов типографики в вашем проекте. Например, чтобы задать семейство шрифтов для основного текста, вы можете задать для свойства body1 объект со свойством fontFamily, которое указывает имя импортированного вами шрифта. Вот пример:

      import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Roboto, sans-serif', // default Material-UI font
    body1: {
      fontFamily: 'Open Sans, sans-serif', // your chosen Google Font
    },`enter code here`
    // You can also set the font family for other typography variants, like body2, h1, h2, etc.
  },
});

После создания объекта MuiTheme вы можете использовать его для обертывания вашего приложения или конкретных компонентов с помощью компонента ThemeProvider, предоставляемого Material-UI. Вот пример:

      import { ThemeProvider } from '@material-ui/core/styles';

// Wrap your app or specific components with the ThemeProvider
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app or components */}
    </ThemeProvider>
  );
};