将样式应用于Tab组件中的ButtonBase
将样式应用于Tab组件中的ButtonBase
提问于 2020-03-09 09:19:13
我正在尝试找出用嵌套组件覆盖的实质性UI样式。假设我想在活动Tab上增加底部边框的高度。此边框由基础ButtonBase应用。
以下是样式定义：
const useStyles = makeStyles(theme => ({
root: {
// an example brutal overriding, not clean, I'd like a better approach for the button
"& .MuiSvgIcon-root": {
marginRight: "8px"
}
},
// override Tab
tabWrapper: {
flexDirection: "row"
},
tabSelected: {
color: theme.palette.primary.main
},
tabLabelIcon: theme.mixins.toolbar, // same minHeight than toolbar
// TODO override buttonBase ???
// ...
}));一个示例用法：
<Tab
value="/"
classes={{
wrapper: classes.tabWrapper,
selected: classes.tabSelected,
labelIcon: classes.tabLabelIcon
}}
icon={
<React.Fragment>
<DashboardIcon />
</React.Fragment>
}
label="Home"
// TODO: is this the expected syntax? TypeScript is not happy with this prop...
buttonBaseProps={{ classes: {} }}
/>我不知道如何在本例中定义ButtonBase类。
我应该如何定义我的道具来覆盖ButtonBase样式？
编辑: doc是这里的https://material-ui.com/api/tab/，最后一节描述了继承过程，但是文档非常简洁。
编辑2:示例用例很糟糕，因为您应该重写".MuiTabs-indicator"来增加底部边框的高度(实际上是额外的跨度，而不是边框)，但问题依然存在。假设我想要更改ButtonBase背景色，例如。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-09 09:42:40
因此，在Tab组件中没有单独的ButtonBase组件。所以你找不到道具叫buttonBaseProps.选项卡本身呈现为按钮组件。
不管你想传递什么风格，都要把它传递给类中的根。见下文
<Tab classes={{
root: classes.customButtonBaseRoot,
wrapper: classes.tabWrapper,
selected: classes.tabSelected,
labelIcon: classes.tabLabelIcon
}}
/>https://codesandbox.io/s/apply-style-to-buttonbase-in-a-tab-component-izgj5
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60597583
复制相关文章
相似问题
腾讯云开发者
