reactjs - 如何更改 Material UI 选项卡按钮的宽度

Question

有没有办法改变按钮的min-width在 <Tab /> 内呈现的属性在 Material UI ？

似乎没有一个属性允许这样做，或者我找不到它。

由于我是 React 新手，我不太确定覆盖该属性的正确方法是什么。

Answer 1

我以前从未使用过这个库，但根据文档，您可以使用 classes 属性添加任何自定义样式。

在 React 中，我们通常使用 className 属性来添加或覆盖组件的样式，根据the material-ui docs ，您可以使用 classes 来接收具有您需要的样式的对象。

首先您需要创建样式:

const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: theme.spacing.unit * 3,
    backgroundColor: theme.palette.background.paper,
  },
  tabRoot: {
    minWidth: 10,
  },
});

在选项卡中，您可以像这样使用 classes 属性:

<Tab label="X" classes={{ root: classes.tabRoot }} />

这是一个示例:https://codesandbox.io/s/l52rw252rm