如何放大 Material-ui 评级图标答案

【问题标题】：How to enlarge Material-ui Rating icons如何放大 Material-ui 评级图标
【发布时间】：2021-11-25 15:13:52
【问题描述】：

我正在使用 npm 来展示开发小部件。我想使用material-ui Ratin component，我已经集成了它。但是当我将小部件放在网页中时，它有一个 html font-size: 62.5%，所以组件太小了，因为在图标样式中，高度和宽度都有一个 1em 单位。 screenshot.

这是我的代码：

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 中使用类图标，我会更改星形图标的父级，而它们继续使用 1em x 1em 大小。 screenshot with changes in icon

【问题讨论】：

标签： javascript css node.js material-ui

【解决方案1】：

您是否尝试将评分组件的图标类设置为定义新宽度和高度的类？

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}
        />

【讨论】：

是的，正如我在帖子中编辑的那样，它只会改变父级的大小而不是星形图标

【解决方案2】：

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

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

【讨论】：