withStyle Selected tab doesn't work

I follow the example to customize the tab text color when its selected, unfortunately, it seems doesn’t work at all. When tab is selected, the color didn’t change to blue.

any ideas?

"@material-ui/core": "^3.8.3",
"typescript": "^3.2.2"

import * as React from "react";
import {Tab} from '@material-ui/core';
import {MuiThemeProvider, createMuiTheme} from '@material-ui/core/styles';
import withStyles, { StyleRulesCallback, WithStyles } from '@material-ui/core/styles/withStyles';


const styles: StyleRulesCallback = theme => ({
    tabRoot: {
        color: "#bdc0c4",
        '&:hover': {
            color: '#ffffff',
            opacity: 1,
        },
        '&$tabSelected': {
            color: '#1890ff',
            fontWeight: theme.typography.fontWeightMedium,
        },
        textTransform: 'initial',
    },
    tabSelected: {
        color: '#1890ff'
    }
});

class NavBarItemsComponent extends React.Component<WithStyles<string> & Props>  {

public render(): React.ReactNode {
    
    const { classes } = this.props;
    const tabStyle = { root: classes.tabRoot, selected: classes.tabSelected };
    
    return (
        
            <Tab label={this.props.label} classes={tabStyle}/>
    )}
    
   
};

export default withStyles(styles)(NavBarItemsComponent);

[oliviertassinari]

Oh, I see that the documentation example isn’t using this pattern. What do you think of updating it? It’s cleaner but requires more knowledge of how it works.

[BinitaBharati]

@oliviertassinari - Thanks for the sample code. It works!