разница между типографикой в ​​материале / ядре и типографикой в ​​материале / системе

Question

В чем разница между типографикой в ​​material/core и типографикой в ​​material/system? Почему они из разных пакетов? Какая разница между ними по использованию? Еще один вопрос: я видел два способа использования типографики в материале-интерфейсе для React:

1. используйте типографский тег следующим образом:

   <Typography>...</Typography>
   

2. путем определения постоянной стиля через createMuiTheme с типографским компонентом:

   const theme = createMuiTheme({
     typography: {
       fontFamily: 'Raleway, Arial',
     }
   })
   

В чем разница между двумя подходами? Способ реализации типографики связан с тем, куда вы их импортировали (/core или /system)? Какой из них предпочтителен на практике?

Answer 1

В чем разница между типографикой в ​​материале / ядре и типографикой в ​​материале / системе?

В базовом пакете есть компонент , который вы ' d использовать для представления текста, аналогичного элементам заголовка и заголовка html. В системном пакете есть функция , которую вы используете при создании собственных стилевых компонентов. Подробнее см. Здесь .

Почему они из разных пакетов?

Экспорт в базовом пакете является визуальными компонентами платформы. Экспорт в системном пакете является поведенческими компонентами платформы.

В чем разница между двумя подходами? Способ реализации типографики связан с тем, куда вы их импортировали (основной или системный)? Какой из них предпочтителен на практике?

Нет, они не связаны с тем, куда вы их импортируете. Используйте компонент, если у вас нет веских причин не делать этого. Второй подход - когда вы хотите взять на себя ответственность и самостоятельно применить стили оформления к компоненту.

Answer 2

Прежде всего, они не эквивалентны.

Typography не равно typography

---

Если мы хотим использовать <Typography /> с его полными функциями и реквизиты, мы используем @ material-ui / core , и это, безусловно, лучшая практика в большинстве ситуаций.

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

---

@ material-ui / system - это нечто, связанное с material-ui theme .

Используется для экспорта тем, которые можно напрямую применить к другим компонентам.

@ material- ui / system предоставляет низкоуровневые служебные функции, называемые «стилевыми функциями», для построения мощных систем проектирования

Вы можете найти typography как в документе по умолчанию Theme, так и System

См. Соответствующий документ:

• MUI - Система
• MUI - Тема

По моему мнению, это может быть хорошим решением для быстрой стилизации компонентов некоторых нативных или сторонних библиотек с помощью MUI-theme. И это тот сценарий, когда мы его используем.

---

Использование темы

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  palette: {
  }
});
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

import { makeStyles } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
  root: {
    color: theme.palette.primary,
  }
}));

const classes = useStyles();

<Typography className={classes.root} />