如何更改“材质UI”选项卡按钮的宽度

Question

有没有一种方法可以更改在Material UI中min-width呈现的按钮属性？<Tab />

似乎没有允许它的属性，或者我找不到它。

而且由于我是React的新手，所以我不太确定重写该属性的正确方法是什么。

Answer 1

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

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

首先，您需要创建样式：

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