Для одного из своих проектов я создаю фреймворк, перегружая компоненты material-ui. Я делаю это с машинописным текстом и с компонентами в виде класса. Я пришел из мира Java и считаю, что объектно-ориентированный код гораздо более читабелен, чем функциональный, особенно для структурирования его кода. Вдобавок я не единственный, кто работает над этим фреймворком и думает, что объект лучше.
К сожалению, я столкнулся с небольшой проблемой, которая заключается в использовании withStyle. Эта функция кажется ловушкой, и из того, что я прочитал, ее невозможно использовать с компонентами как классом. Однако в зависимости от свойств, предоставленных моим компонентам, я хотел бы повлиять на стиль компонента и его проводов. Как я могу имитировать то, что делает withStyle?
Я хотел бы воспроизвести группы кнопок без границ на кнопках: https://material-ui.com/components/toggle-button/#customized -toggle-button (CodeSandbox: https://codesandbox.io/s/uxgfx).
Мой базовый класс выглядит следующим образом (упрощенная версия):
export class AktToggleButtonGroup extends React.Component<MyProps, MyState> {
render(): JSX.Element {
const { children, exclusive, orientation, value } = this.props;
return (
<ToggleButtonGroup
id={this.id}
exclusive={exclusive}
onChange={this.handleOnChange.bind(this)}
orientation={orientation}
value={value}
>
{children}
</ToggleButtonGroup>
)
}
private handleOnChange(event: React.MouseEvent<HTMLElement, MouseEvent>, value: any): void {
doSomething();
}
}
Как удалить границы на кнопках, если у меня есть свойство (для пример без полей) что верно? Большое спасибо