Я переопределяю вкладки 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);
Может ли кто-нибудь указать мне правильное направление, чтобы выровнять текст метки с правой стороны контейнера вкладок?