измените Material UI Typography на styleled-компонент

Question

Возможно ли преобразовать элементы пользовательского интерфейса материала

<Container component="main" maxWidth="XS">

<Typography component="h1" variant="h5">
          Sign in
        </Typography>

в styleled-компоненты?

Я пробовал это для типографики, но текст кажется намного меньше.

export const Typo = styled.h5`

export const Typo = styled(Typography)`
component: h1; 
variant: h5;
`

Другой пример: я пытался использовать это, но mt: 8 тоже не работает. Я также не могу импортировать Box из систем пользовательского интерфейса, поэтому попробовал этот метод, посмотрев пример.

import Box from '@material-ui/core/Box';

export const StyledBox = styled(Box)`
mt: 8;

Answer 1

Использование @ material-ui / system

@material-ui/system предоставляет низкоуровневые вспомогательные функции, называемые "функциями стиля", для построения мощных систем проектирования.

Используйте его со стилевым компонентом

import styled from 'styled-components';
import { palette, spacing, typography } from '@material-ui/system';

const Box = styled.div`${palette}${spacing}${typography}`;

Для типографика

См. Демонстрацию здесь: https://material-ui.com/system/typography/#typography

---

Обновление

Если мы хотим только стилировать материал-пользовательский интерфейс с styled-components

Импорт из обычного @ material-ui / core будет штраф

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

const StyledTyppgraphy = styled(Typography)`
  ...
`;

См .: документ о стилевых компонентах Расширяющиеся стили

Answer 2

Как уже отмечал @keikai, вы можете расширять стили .

Я сделал Code Sandbox с несколькими примерами. Вы можете просто импортировать компонент и использовать его следующим образом:

import { Typography } from "@material-ui/core";
const StyledTypography = styled(Typography)``;

<StyledTypography variant="h5" component="h1"></StyledTypography>

Без добавления пользовательских стилей и Typography, и StyledTypography должны выглядеть одинаково.

Пример оформления (с пользовательским цветом)

import { Box } from "@material-ui/core";
const StyledBox = styled(Box)``;

<StyledBox mt={8}></StyledBox>

Пример окна

Обратите внимание, что я включил дополнительный способ работы с переменными интервала пользовательского интерфейса материала.

Как упомянуто в документации UI , вы также можете работать с промежуточными подпорками, импортируя spacing из @material-ui/system. Таким образом, вы можете использовать подпорки без расширения компонента Material UI. Вы также можете использовать функцию spacing непосредственно в стилизованном компоненте, но я думаю, что это выходит за рамки этого вопроса.