@Andrey1302

Какие существуют лучшие практики в создании собственных компонент на основе material-ui (MUI)?

Реализую библиотеку компонент на основе MUI (https://mui.com/material-ui/getting-started/) по готовому дизайну в фигме.

Например компонент кнопки выглядит вот так:

import {ButtonProps} from '@mui/material';
import {StyledButton} from "./Button.styles";

export const Button = ({ children, ...props }: ButtonProps) => {
    return <StyledButton {...props}>{ children }</StyledButton>
}


Далее переопределяю стили:
export const StyledButton = styled(Button)<ButtonProps>(({ theme, variant, size }) => ({
    textTransform: 'none',
    borderRadius: theme.spacing(2),
    paddingBlock: '10px',
    paddingInline: '14px',
    lineHeight: '20px',

    ...(size === 'small' && {
        paddingBlock: theme.spacing(2),
        paddingInline: theme.spacing(3),
    }),

    ...(variant === 'outlined' && {
       border: `1px solid ${theme.palette.border.primary}`,
        color: theme.palette.text.secondary
    }),

    '& > .MuiButton-startIcon': {
        marginRight: theme.spacing(1),
    }
}));


Есть сомнения что неправильно использую эту библиотеку.
1. Нужно ли расширять пропсы моей кнопки от всех ButtonProps? Получается что моя кнопка принимает всё, что принимает кнопка с библиотеки. Тогда я могу передать например size='large' и будут применены стили дефолтные, так как свои стили я не определил. То есть нету костистентности. Какие-то стили я переопределяю, какие-то нет. Кажется что если переопределил в своих стилях один variant, то по-хорошему нужно все его значения реализовать.
2. Есть ли смысл вообще использовать муи для таких базовых компонент, если я переопределяю очень много стилей?
3. Какие вообще существуют практики реализации кастомных компонент на основе вот таких библиотек?

Спасибо
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы