I've been trying to modify a @media CSS rule on a Material UI component, similar to the discussions on How to over-ride an @media css for a material-ui react component and Override components like MuiTab that use media queries. However, I have not been successful in my attempts so far. I tried to replicate the solution provided in those threads but haven't seen any changes.
The specific change I want to make is overriding the media query property from 'display: none' to 'display: inline-flex', but it's not working as expected.
Any tips on how I can solve this issue?
https://i.stack.imgur.com/TcZKV.png
This is what I attempted:
const theme = createMuiTheme({
MuiTabs: {
scrollButtonsDesktop: {
'@media (max-width: 599.95px)': {
display: 'inline-flex',
},
},
},
});
In the return section:
return (
<React.Fragment>
<Box m={5}>
<ThemeProvider theme={theme}>
<Grid container justify="center" alignItems="flex-start">
<StyledTabs variant="scrollable" value={filterEvent} onChange={handleChangeEvent} aria-label="styled tabs example">
<StyledTab label="AAAAAAAA" value="Hiking" />
<StyledTab label="AAAAAAAA" value="Hiking" />
<StyledTab label="AAAAAAAA" value="Hiking" />
<StyledTab label="AAAAAAAA" value="Hiking" />
<StyledTab label="AAAAAAAA" value="Hiking" />
<StyledTab label="AAAAAAAA" value="Hiking" />
<StyledTab label="AAAAAAAA" value="Hiking" />
</StyledTabs>
</Grid>
</ThemeProvider>
</Box>
</React.Fragment>
);
};
styledtabs
const StyledTabs = withStyles({
indicator: {
display: 'flex',
justifyContent: 'center',
backgroundColor: 'transparent',
'& > span': {
maxWidth: 80,
width: '100%',
backgroundColor: 'black',
},
},
})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />);
const StyledTab = withStyles((theme) => ({
root: {
textTransform: 'none',
color: '#000',
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.pxToRem(18),
'&:focus': {
opacity: 1,
},
},
}))((props) => <Tab disableRipple {...props} />);