textAlign right 不适用于 material-ui 中的自定义垂直标签标签

Question

我正在覆盖 material-ui 的选项卡以获得选项卡的垂直视图。 但是，我也希望这些选项卡的标签（文本）向右对齐，使其看起来更统一。 我已经尝试了各种样式，但仍然无法让它发挥作用。

<VerticalTabs
      value={tabValue}
      indicatorColor={'primary'}
      onChange={this.handleTabChange}


    >
      <MyTab
        disableRipple
        lableStyle={{float: 'right'}} <----- doesn't work
        label="Sourcing"
      />
        <MyTab
        disableRipple
        lableStyle={{float: 'right'}}
        label="Production"
      />
      <MyTab
        disableRipple
        lableStyle={{float: 'right'}}
        label="Shipping"
      />
      <MyTab
        disableRipple
        lableStyle={{float: 'right'}}
        label="Sales"
      />
    </VerticalTabs>

覆盖样式：

const VerticalTabs = withStyles(theme => ({
  flexContainer: {
    flexDirection: 'column',
  },
  indicator: {
    display: 'none',
  },
  tabsRoot: {
    textAlign: 'right'
  }

}))(Tabs)

const MyTab = withStyles(theme => ({

  root: {
  borderRight: '2px solid lightgray',
  textAlign: 'right'


  },
  selected: {
    color: '#4ABDAC',
    borderRight: '3px solid #4ABDAC',
    textAlign: 'right'


  },
  label: {
    fontSize: 20,


    textTransform: 'initial',
  },


}))(Tab);

谁能指出我正确的方向，将标签文本与选项卡容器的右侧对齐？

Answer 1

升级到最新版本的 material-ui 修复了这个问题（目前是 v3.9.1）

Answer 2

材质 ui 中的 Tab 组件有一个包装器，其中应用了 align-items: "center" css(MuiTab-wrapper)。 您需要覆盖它并将其更改为“flex-start”或“flex-end” https://material-ui.com/api/tab/

wrapper: {
    alignItems: "flex-start"
}