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

Question

[Andrey1302]

Реализую библиотеку компонент на основе 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. Какие вообще существуют практики реализации кастомных компонент на основе вот таких библиотек?

Спасибо

Comments

[Егор Живагин]

Нужно ли расширять пропсы моей кнопки от всех ButtonProps? Получается что моя кнопка принимает всё, что принимает кнопка с библиотеки. Тогда я могу передать например size='large' и будут применены стили дефолтные, так как свои стили я не определил. То есть нету костистентности

Я не вижу, где здесь "нету костистентности" , всё абсолютно нормально

Есть ли смысл вообще использовать муи для таких базовых компонент, если я переопределяю очень много стилей?

Имхо, нет, но надо смотреть, чем вы вообще пользуетесь из ui kit-a. Насколько вам нужны темизация, палитра, именно эти брейкпоинты, ...