更改样式（颜色）线性进度条/ Material UI / Reactjs

Question

 <LinearProgress style={{barColorPrimary: "red"}}" value={Number(campanha.Percentual)} />

如何更改栏的 barColorPrimary？ 我需要像在代码中一样使用样式。

Answer 1

我喜欢使用 withStyles() 高阶组件来注入自定义样式。

在此处查看 LinearProgress 的示例： https ://codesandbox.io/s/material-demo-forked-kwvb1?file =/ demo.tsx（我们将 barColorPrimary 覆盖为条形颜色，将 colorPrimary 覆盖为背景）。

有关在 Material UI 中自定义组件的更多信息，请访问： https : //material-ui.com/customization/components/

Answer 2

我是这样解决的。。

 const CustomLinearProgress = styled(LinearProgress)(({ datatype }) => ({ height: 6, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { backgroundColor: 'light gray', }, [`&.${linearProgressClasses.bar}`]: { borderRadius: 5, backgroundColor: datatype === 'finished'? 'green': 'blue', }, })); return ( <CustomLinearProgress datatype="finished" variant="determinate" value={50} /> );