reactjs - 如何使用 Material UI (React) 创建评级条(或线性仪表)

Question

我是 React 的新手，我想创建一个这样的评分栏:

我想用material UI，但是没有找到这样的组件。我找到了一个评级 UI 组件:https://material-ui.com/components/rating/ .但我需要 UI 像一个线性仪表，并用不同的数字 (1/5, 2/5,3/5,4/5,5/5) 改变颜色。

其实我已经用过评分组件了:

                <Grid item xs={6} className={classes.overAllScoreValueContainer}>
                    <Box component="fieldset" marginLeft={0} marginTop={0.25} padding={0} borderColor="transparent">
                        <Rating
                            name="overall-score"
                            value={this.state.overAllRating}
                            readOnly
                            size={"large"}
                            classes={{
                                iconFilled: this.props.classes.iconFilled,
                                iconHover: this.props.classes.iconHover
                            }}
                        />
                    </Box>
                </Grid>

但 UI 不正确。

有人可以帮忙吗？

感谢您指出在 Material UI 中使用进度条。我可以做出如图所示的形状，但是如何根据值改变颜色？？请检查这个: https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js

Answer 1

可以使用material ui progress...看文档。 https://material-ui.com/components/progress/#progress

您也可以自定义它。