![](/img/trans.png)
[英]Material-UI + React: Why doesn't <Table/>'s onRowSelection work for Select All?
[英]Override an @media for material-ui react componentd doesn't work
我想在像这些线程这样的 Material UI 组件上覆盖@media css( 如何为 material-ui 覆盖 @media css 以响应 MuiTab 组件),但是像它这样的组件不会使用它的媒体查询在我的情况下工作。 我试图复制,所以我可以理解它是如何工作的,但到目前为止我没有看到任何结果。
我想要做的是覆盖这个控制台中的媒体查询从'diplay:none'到'diplay:inline-flex' ,但它并不能全部工作
我怎样才能解决这个问题?
我这样做是为了覆盖
const theme = createMuiTheme({
MuiTabs: {
scrollButtonsDesktop: {
'@media (max-width: 599.95px)': {
display: 'inline-flex',
},
},
},
});
在退货部分:
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>
);
};
样式标签
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} />);
没关系我找到了
我需要把关键字覆盖
const theme = createMuiTheme({
overrides: {
MuiTabs: {
scrollButtonsDesktop: {
'@media (max-width: 599.95px)': {
display: 'inline-flex',
},
},
},
},
});```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.