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

Question

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

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

wrapper: {
    alignItems: "flex-start"
}