Overriding LinearProgress's bar2Determinate styles not applied

[agentmilindu]

I'm trying to overide the LinearProgress's bar2Determinate color as follows,

import React from 'react';
import PropTypes from 'prop-types';
import LinearProgress from '@material-ui/core/LinearProgress';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  bar1Determinate:{
    background: 'linear-gradient(to left, #e21e4a, #a92fff)',
  },
  bar2Determinate:{
    background: '#333333',
  }
});

const Component = ({classes}) => (
  <div >
    <LinearProgress value={80} variant="determinate" classes={{
      bar1Determinate: classes.bar1Determinate,
      bar2Determinate: classes.bar2Determinate,
    }} />
  </div>
);

Component.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Component);

But I'm getting following warning and the color is nor overridden.

warning.js:36 Warning: Material-UI: the key bar2Determinate provided to the classes property is not implemented in LinearProgress.
You can only override one of the following: root,colorPrimary,colorSecondary,buffer,query,dashed,dashedColorPrimary,dashedColorSecondary,bar,barColorPrimary,barColorSecondary,bar1Indeterminate,bar2Indeterminate,bar1Determinate,bar1Buffer,bar2Buffer

When I checked the source code, I found this line,

https://github.com/mui-org/material-ui/blob/0efc81dad607437fa448d6b19a2c985266790848/packages/material-ui/src/LinearProgress/LinearProgress.js#L195

    [classes.bar2Indeterminate]: variant === 'indeterminate' || variant === 'query',
    [classes.bar1Determinate]: variant === 'determinate',
    [classes.bar2Buffer]: variant === 'buffer',

My guess is, it should be,

[classes.bar2Determinate]: variant === 'determinate',

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Should be able to override the bar2Determinate styles.

Current Behavior

The bar2Determinate styles are not overridden.

Steps to Reproduce

Link: https://codesandbox.io/s/rrn52ooqxn

1. Identify if the ba2 color is #333333

Context

I'm trying to implement a custom styled LinearProgress

Your Environment

Tech	Version
Material-UI	v1.4.0
React	16.4.1
browser	Chrome