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

Question

I am overriding the tabs of material-ui to have a vertical view of the tabs. However, I also want the label (text) of these tabs to align to the right so it looks more uniform. I've tried every kind of styling but still cannot get it to work.

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

override styling:

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

Can anyone point me in the right direction to align the label text to the right side of the tab container?

Answer 1

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

Answer 2

The Tab component in material ui has a wrapper with align-items: "center" css(MuiTab-wrapper) applied to it. You need to override this and change it to "flex-start" or "flex-end" https://material-ui.com/api/tab/

wrapper: {
    alignItems: "flex-start"
}