After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It was strange to see how the presence of a material-ui component at the top of the render completely changed the applied styling. The styling injected via the classes prop was not being applied as expected. Below is the code that renders correctly:
/**By commenting out either the Button or Card material-ui Component below, I can view the
* styled components without any issues. If either are present, the styling looks terrible.
*/
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>
);
}
The styled components MyTabs themselves utilize a combination of ConditionalThemeWrapper, withTheme HOC (which overrides the material-ui styles), and withStyles HOC. Although, I'm uncertain if this is directly related to the observed behavior.
If I remove both the <Card/> and <Button/> material-ui components, the styling injected via the classes prop is not applied as intended. I find it puzzling why this occurs (although I can temporarily resolve it by adding !important to increase CSS priority).
I have attempted to reproduce this issue on a codesandbox, but whether the button/card component is included or not, the components consistently render correctly.
You can access the code on my GitHub repository at https://github.com/TaraMcC/tabsStylingError.git. Try commenting out the material-ui button to observe how the tabs change their styling.
I would greatly appreciate any insights or guidance on this matter!