Как динамически изменить цвет фона индикатора выполнения в пользовательском интерфейсе React Material?

Question

//Component Style:
const BorderLinearProgress = withStyles(theme => ({
    bar: {
        borderRadius: 8,
        backgroundColor: "red"
   }
}))(LinearProgress);

//Component use:
<BorderLinearProgress variant="determinate" value={50} />

Я новичок в реакции и материальном интерфейсе. В приведенном выше коде мне нужно динамически передать или изменить bar: backgroundColor. Пожалуйста, дайте мне знать, что можно сделать. Заранее спасибо

Answer 1

Вы можете передать свой color с помощью переменной темы.

// Passing theme
const useStyles = makeStyles((theme) => ({
    bar: props => ({
        borderRadius: 8,
        backgroundColor: props.color
   })
}))

//Using style in component
...
    const [progressColor, setProgressColor] = React.useState({ color: 'red' })
    const classes = useStyles(progressColor);

    // Update color based on your requirements i.e. setProgressColor({color: 'green'}) in some useEffect() when progress crosses some threshold

    return (
         <LinearProgress color={classes.bar} />
    )
...

Вы можете найти пример в официальных документах: https://material-ui.com/styles/basics/#adapting -based-on-props

Answer 2

Сделать это можно двумя способами:

1). просто напишите

<LinearProgress  style={{backgroundColor: "red"}} variant="determinate" value={50} />

2).

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

const styles = {
  LinerProgressColor: {
    backgroundColor: 'red',
  },
};

function BorderLinearProgress (props) {
  return <LinearProgress  className={LinerProgressColor} variant="determinate" value={50} />;
}

export default withStyles(styles)(BorderLinearProgress);