How change active tab color in React material-ui?

Question

How I can change the color of the active tab?

I mean, this pink line, look at the pic.

Answer 1

For material-ui version 1.0.0-beta.36, the following worked for me:

inkBarStyle must've been deprecated/replaced by indicatorColor in v1.0

EDIT: Link to v1.0 docs: https://material-ui-next.com/api/tabs/

EDIT: Following the stable release of v1.0, it appears the previous solution no longer works.

Here are remaining solutions:

1. Use a classes override for the indicator class. Link to docs on overrides. Link to docs Tab component with CSS API classes at bottom.
2. Configure your theme palette to use your desired color via the primary or secondary color intentions. You may then specify your desired primary or secondary color to be used with the indicatorColor attribute mentioned above. Link to Docs.

Classes overrides may be the easier option. You need to use the withStyles component in order to inject your custom style classes. The reason being that the library's styling will override your classes or styled-components. The docs linked above provide a great example.