将样式应用于Tab组件中的按钮库

Question

我正试图找出用嵌套组件覆盖Material 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样式？

编辑：文档在这里https://material-ui.com/api/tab/，最后一节描述了继承过程，但文档非常简洁。

编辑2：示例用例很糟糕，因为您应该覆盖".MuiTabs-indicator"以增加底部边界高度(它实际上是一个额外的跨度，而不是边界(，但问题仍然存在。例如，假设我想更改ButtonBase的背景颜色。

Answer 1

因此，在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