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