如何在 Material UI 中更改标签宽度

Question

我正在使用 Material UI tabs v0.20.0 以表格格式显示内容。标签占用全宽。我附上了预期和当前输出的屏幕截图。

预期输出

电流输出

请让我知道相同的解决方案。

提前致谢

Answer 1

如果你想要固定宽度的选项卡，你需要覆盖root传递给Tab组件的css 类，你必须覆盖minWidth和width属性。

例子：

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);

Answer 2

该Tabs组件确实接受一个variantprop。接受以下字符串值之一：

• fullWidth -> 这是 OP 当前结果
• 标准-> 这是默认值
• 可滚动-> 如果并非所有选项卡项均可见，则通过按钮添加滚动功能

到目前为止，OP 的预期结果应该是默认的 prop（标准）。

官方文档：

• 选项卡指南： https: //material-ui.com/components/tabs/
• 选项卡 API： https: //material-ui.com/api/tabs/

Answer 3

将 minWidth 设置为 50% 即可完成

<Tabs value={value} style={{backgroundColor:"#121858",color:"#FFF"}} onChange= 
         {handleChange} aria-label="simple tabs example" >
        <Tab label="Tab One" {...a11yProps(0)} style={{minWidth:"50%"}}/>
         <Tab label="Tab Two" {...a11yProps(1)}  style={{minWidth:"50%"}}/>
 </Tabs>

Answer 4

您必须对制表符宽度进行硬编码：

const width = 200;

const widthModifier = {
  width: `${width}px`,
};

然后应用它来更改制表符宽度：

<Tab label="Item One" style={widthModifier}>

您还必须onActive自己跟踪当前活动选项卡并计算墨迹栏的位移。这是一个完整的工作示例：

import React, { Component } from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
};

const width = 200;

const widthModifier = {
  width: `${width}px`,
};

class TabWidth extends Component {
  constructor(props) {
    super(props);

    this.state = { selectedIndex: 0 };
  }

  render() {
    const { selectedIndex } = this.state;

    // Notice that I have to calculate the left position of the ink bar here for things to look right
    return (
      <Tabs inkBarStyle={ {left: `${width * selectedIndex}px`, ...widthModifier}}>
        <Tab label="Item One" style={widthModifier} onActive={() => this.setState({ selectedIndex: 0 })}>
          <div>
            <h2 style={styles.headline}>Tab One</h2>
            <p>
              You can put any sort of HTML or react component in here. It even keeps the component state!
            </p>
          </div>
        </Tab>
        <Tab label="Item Two" style={widthModifier} onActive={() => this.setState({ selectedIndex: 1 })}>
          <div>
            <h2 style={styles.headline}>Tab Two</h2>
            <p>
              This is another example tab.
            </p>
          </div>
        </Tab>
      </Tabs>
      );
    }
}

export default TabWidth;

但是，如果可能的话，您确实应该使用 v1。在material-ui v1中，您所需的选项卡行为是开箱即用的默认行为，并将根据屏幕尺寸进行缩放。