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