如何在材质UI中更改选项卡宽度 [英] How to change tabs width in material UI

问题描述

我正在使用材料UI选项卡v0.20.0来以表格格式显示内容.制表符占据全角.我已经附上了预期和当前输出的屏幕截图.

I am using material UI tabs v0.20.0 for display content in tabular format. Tabs are taking full width. I have attached screenshot of expected and current output .

预期输出

电流输出

请让我知道解决方案.

预先感谢

推荐答案

如果要使用固定宽度的制表符，则需要覆盖传递给Tab组件的root css类，在此必须覆盖两个minWidth和width属性.

If you want tabs of fixed width, you need to override the root css class passed to the Tab component, where you have to override both the minWidth and width attributes.

示例:

const Component = ({ classes }) => (
    <Tabs value={0}>
        <Tab classes={{ root: classes.tab }} label="One" />
        <Tab classes={{ root: classes.tab }} label="Two" />
    </Tabs>
);


// this is injected as classes prop into the wrapping component
const styles = {
    tab: {
        minWidth: 200, // a number of your choice
        width: 200, // a number of your choice
    }
};
export default withStyles(styles)(Component);

这篇关于如何在材质UI中更改选项卡宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！