ReactJS / Typescript / Material-ui: компонент класса и withStyle - PullRequest
0 голосов
/ 09 июля 2020

Для одного из своих проектов я создаю фреймворк, перегружая компоненты 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();
    }
}

Как удалить границы на кнопках, если у меня есть свойство (для пример без полей) что верно? Большое спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...