Question

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

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

由于我是React的新手，我不太清楚覆盖房产的正确方法是什么。

Answer 1

我之前从未使用过此库，但根据文档，您可以使用classes道具添加任何自定义样式。

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

首先，您需要创建样式：

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

Answer 2

您可以使用类prop将宽度应用于Tab组件。

const style = {
    root: {
     minWidth: 500
    }  
}

<Tab classes={style.root} />

查看here了解详情。

OR

您也可以使用下面的内嵌式

const style = {
   minWidth: 500
}

<Tab style={style} />

OR

如果您觉得内联样式很难，那么使用muitheme定制您的组件。查看here了解详情。

Answer 3

查看是否可以使用withStyles HOC覆盖它。

const styles = {
 tab: {
  width: 140px
 }
}

export const MyTab = (props) => {
 return (
  <Tab className={props.classes.tab} label="Item One" />
 );
}

export default withStyles(styles)(MyTab);

请查看有关overriding classes

的文档

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

3 个答案: