Привет. Столкнулась с вопросом о композиции Очень все таки сложно или

я не понимаю правильный подход.
Есть Base, у него ширина 200, плюс там еще есть стили

export const useStyles = makeStyles(theme => ({
container: {
width:200,
"&:hover .MuiInputAdornment-positionEnd svg":{
display: "block",
},
},
);

const Base (props)=>{
const classes = useStyles();
return <TextField classes={{root:classes.container}} {...props} />
}

Потом у меня есть Extended на основе Base
Там ширина уже 400,
Но!!! У меня пропадают остальные стили есть сделать так


export const useStyles = makeStyles(theme => ({
container: {
width:400,
},
);
const Extended ()=>{
const classes = useStyles();
return <Base classes={{root:classes.container}} />
}

Как правильно кастоматизировать ??

Пока что мне приходить в голову что то такое
const Base ({classes, ...props})=>{
const classes = useStyles();
if(classes)
return <TextField classes={{root:classes.container + ' '+classes.container }} {...props} />
}

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

Как правильно готовить композицию ?? Или я правильно все делаю, с этим надо смириться ??

Там у них есть утилита clsx https://material-ui.com/getting-started/faq/#whats-the-clsx-dependency-for Еще в Бейз можно передать пропс width с шириной например, и дальше передать его в useStyles, и получить эту ширину в стилях. Посмотри как здесь props.color проброшен https://material-ui.com/styles/api/#examples-3

спасибо посмотрю. А вы на тайпскрипте пишете ?? Если писать на тайпскрипте, то когда добавляешь новые цвета, компилятор уже начинает ругаться Типа материал юи принимет только два цвета, праймери и секондари Приходится писать декларации, покрывать новыми типами, объясняя material ui что все ок, ты умеешь принимать новые цвета тоже. Типа так. Муторно конечно. Или вы глушите это @ts-ignore или делая any тип ??

На ТайпСкрипте, но я Matherial UI не использовал давно, могу предположить что надо Тему как-то настраивать, по любому есть решение, гуглить надо

Написать обёртку))))))))))))

Переопределение типов из библиотеки же. Гугли declare module/override material ui theme types