如何在JSS中处理进度条值的颜色？

const styles = {
  progressBar: {
    width: '100%',
    height: '20px',
    backgroundColor: '#ccc',
    borderRadius: '10px',
    overflow: 'hidden',
  },
  progressValue: {
    height: '100%',
    animation: '$colorAnimation 5s infinite',
  },
  '@keyframes colorAnimation': {
    '0%': { backgroundColor: 'green' },
    '50%': { backgroundColor: 'yellow' },
    '100%': { backgroundColor: 'red' },
  },
};

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(styles);

const ProgressBar = ({ value }) => {
  const classes = useStyles();

  return (
    <div className={classes.progressBar}>
      <div className={classes.progressValue} style={{ width: `${value}%` }} />
    </div>
  );
};

export default ProgressBar;

import React from 'react';
import ProgressBar from './ProgressBar';

const App = () => {
  const progressValue = 50; // 进度值

  return (
    <div>
      <ProgressBar value={progressValue} />
    </div>
  );
};

export default App;