如何放大 Material-ui 评级图标

Question

我将使用npm来开发一个小部件。 我想使用material-ui Ratin组件，并已经集成了它。但是当我将小部件放在网页上时，它的html字体大小为62.5％，因此组件太小了，因为在图标样式中，高度和宽度都有1em单位。 截图。

这是我的代码：

import React from 'react';
import Rating from '@material-ui/lab/Rating';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import { withStyles } from '@material-ui/core/styles';
import StarOutlineIcon from '@material-ui/icons/StarOutline';

const styles = theme => ({
  iconFilled:{
    color:theme.palette.primary.main,
  },
  iconEmpty:{
    color:theme.palette.primary.main
  }
})

class SimpleRating extends React.Component{

  state = {
    disabled: false,
    rating: 0,
    opinion: "",
  };

  changeRating(event, newRating) {
    this.setState({
      rating: newRating,
      disabled: true
    });

    this.props.send_rating(newRating)
  }

  defaultLabelText(value) {
    let text="sin calificación"
    if (value===1){
      text = "una estrella"
    }
    else if (value>1 && value<=5) {
      text = ""+ value + " estrellas"
    }
    return(text)
  }

  render() {
  const { classes } = this.props;
  return (
    <div>
      <Box component="fieldset" mb={3} borderColor="transparent">
        <Typography component="legend"></Typography>
        <Rating
          classes={{
            iconFilled: classes.iconFilled,
            iconEmpty: classes.iconEmpty
          }}
          emptyIcon = {<StarOutlineIcon></StarOutlineIcon>}
          name={"rating_"+this.props.number}
          disabled={this.state.disabled}
          getLabelText={this.defaultLabelText.bind(this)}
          onChange={this.changeRating.bind(this)}
          value={this.state.rating}
        />
      </Box>
    </div>
  );
    }
}

export default withStyles(styles)(SimpleRating);

虽然我已经能够使用样式更改颜色，但我无法修改下面的内容。如何更改图标的属性？ 编辑： 如果我在CSS中使用类“icon”，则会更改星形图标的父级，而它们仍将保持1em x 1em的大小。 带有图标更改的截图

- Adrián

Answer 1

为了增加评分图标的大小，我们可以使用字体大小。使用高度和宽度将不起作用，因为它会增加它们所在容器的大小。

例如：

<Rating 
    name="rating"
    value={starValue}
    precision={0.1}
    size="large"
    readOnly
    sx={{
        fontSize: "4rem"
    }}
/>

如果您设置size="large"，则.MuiRating-sizeLarge仅会将图标大小增加到约1.8rem。而.MuiRating-icon将进一步增加图标的大小。

- Venkatesh Thapan

Answer 2

最终我使用了这段代码解决了问题，因为我无法进入图标本身：

icon = {<StarIcon style={{width:"32px",height:"32px"}}></StarIcon>}
emptyIcon = {<StarOutlineIcon style={{width:"32px",height:"32px"}}></StarOutlineIcon>}

- Adrián

Answer 3

你尝试过将评分组件的图标类设置为定义新宽度和高度的类吗？

const styles = theme => ({
  iconFilled:{
    color:theme.palette.primary.main,
  },
  iconEmpty:{
    color:theme.palette.primary.main
  },
  //just some sample values
  icon: {
    width: 64,
    height: 64
})

然后：

<Rating
          classes={{
            iconFilled: classes.iconFilled,
            iconEmpty: classes.iconEmpty,
            icon: classes.icon
          }}
          emptyIcon = {<StarOutlineIcon></StarOutlineIcon>}
          name={"rating_"+this.props.number}
          disabled={this.state.disabled}
          getLabelText={this.defaultLabelText.bind(this)}
          onChange={this.changeRating.bind(this)}
          value={this.state.rating}
        />

- Rainer Tonmensch

---

是的，正如我在帖子中编辑的那样，它只会更改父元素的大小，而不会更改星形图标。 - Adrián