Я создал несколько стилизованных компонентов, которые не корректно отображались для меня, но при переносе кода в codeandbox (в котором есть кнопка material-ui в шаблоне) компоненты воспроизводились нормально. Это код, который отображает как ожидалось. Затем я выяснил, что наличие компонента material-ui в верхней части рендера полностью меняет применяемый стиль. (стиль, введенный с помощью класса prop, не применяется). Вот код, который хорошо отображает:
/**If I comment in either the Button or the card material-ui Component below, I have no problem seeing the
* styled components. If either are present, the styling is awful.
*/
function App() {
return (
<div className="App">
<Button variant="contained" color="primary">
Hello
</Button>
{/* <Card /> */}
<MyTabs tabInformation={tabInformation} />
<MyTabs tabInformation={tabInformation} altType={true} />
<StyledTabs tabInformation={tabInformation} altType={false} />
</div>
);
}
Стилизованные компоненты MyTabs сами используют хитрость ConditionalThemeWrapper, withTheme HO C (который переопределяет стили Material-Ui и withStyles HO C. Хотя я не уверен, что это имеет отношение к поведению, которое я наблюдаю.
Если я удаляю компонент <Card/> или <Button/> material-ui (так что ни один из них не присутствует), стиль вводится через реквизит классов не применяется, но я не понимаю, почему (я могу взломать! важно увеличить приоритет css, чтобы увидеть стиль, но я знаю, что не должен был этого делать).
Я не могу воспроизвести это в codeandbox, поскольку, независимо от того, есть ли компонент кнопки / карты, компоненты отображаются правильно.
Я отправил код в репозиторий github в https://github.com/TaraMcC/tabsStylingError.git Закомментируйте кнопку Material-UI, чтобы увидеть, как вкладки меняют стиль.
Очень благодарен за любые указатели!