Dynamically update css from theme color with makeStyles

Question

Say i have this style for a material ui LinearProgress bar, to apply our own styling to it.

The backgroundColor of MuiLinearProgress-barColorPrimary (filled color of a progress bar) can sometimes be too dark for the text.color thus making the text disappear, how do i go about checking the theme color of this and then updating the text.color? Is this possible?

i.e. how do i perform an update to text color from what is used in the theme? If it's not possible that it fine, what alternatives could you suggest. Thank you!

const useProgressBarStyles = makeStyles<ITheme, IProgressBarStyleProps>(
  (theme) =>
    createStyles({
      container: {
        height: 25,
        display: 'grid',
        width: '100%',
      },
      progressBar: {
        height: '100%',
        position: 'relative',
        gridRowStart: 1,
        gridColumnStart: 1,
        '& .MuiLinearProgress-barColorPrimary': {
          backgroundColor: theme.mvf.palette.accent.d.main,
        },
        '&.MuiLinearProgress-colorPrimary': {
          backgroundColor: theme.mvf.palette.accent.d.light,
        },
      },
      text: ({ isPast50Percent }) => ({
        gridRowStart: 1,
        gridColumnStart: 1,
        position: 'relative',
        width: 'inherit',
        zIndex: 1,
        lineHeight: '25px',
        fontSize: theme.mvf.fontSize.tiny,
        color: 'red',
        textAlign: 'center',
      }),
    }),
);

type ProgressBarType = FunctionComponentWithDefaultProps<
  IComponentProps,
  typeof defaultProps
>;

const ProgressBar: ProgressBarType = ({ id, progress, text, testId }) => {
  const isPast50Percent = progress > 50;
  const styles = useProgressBarStyles({ isPast50Percent });
  return (
    <Box className={styles.container} data-testid={testId}>
      <Typography className={styles.text}>
        {text} {progress}%
      </Typography>
      <LinearProgress
        variant="determinate"
        className={styles.progressBar}
        id={id}
        value={progress}
      />
    </Box>
  );
};

ProgressBar.defaultProps = defaultProps;

export default ProgressBar;