[英]Override an @media for material-ui react componentd doesn't work
i'd like to override a @media css on a Material UI component like these threads ( How to over-ride an @media css for a material-ui react component and Override components like MuiTab that use media queries ), but it doesn't to work in my case.我想在像这些线程这样的 Material UI 组件上覆盖@media css( 如何为 material-ui 覆盖 @media css 以响应 MuiTab 组件),但是像它这样的组件不会使用它的媒体查询在我的情况下工作。 I tried to replicate, so I can understand how it works behind and I see no results so far.
我试图复制,所以我可以理解它是如何工作的,但到目前为止我没有看到任何结果。
What I wanted to do is override the media query in this console from 'diplay: none' to 'diplay: inline-flex' but it doesn't work all我想要做的是覆盖这个控制台中的媒体查询从'diplay:none'到'diplay:inline-flex' ,但它并不能全部工作
How can I fix this?我怎样才能解决这个问题?
I did this to override我这样做是为了覆盖
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} />);
Nevermind I found it没关系我找到了
I need to put the keyword overrides我需要把关键字覆盖
const theme = createMuiTheme({
overrides: {
MuiTabs: {
scrollButtonsDesktop: {
'@media (max-width: 599.95px)': {
display: 'inline-flex',
},
},
},
},
});```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.