'How to enlarge Material-ui Rating icons

I am using npm to show develop a widget. I want to use material-ui Ratin component and I have integrate it. But when I place the widget in a webpage, it has a html font-size: 62.5%, so the component is too small because in the icon style, there are a 1em unit in height and in width. screenshot.

This is my code:

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);

Althougth I have been able to change the color with the styles, I cannot modify that down. How can I change that properties of the icon?

EDIT: If i use the class icon in css i change the parent of the star icons while they continue with 1em x 1em size. screenshot with changes in icon

javascriptcssnode.jsmaterial-ui


Solution 1:[1]

To increase the size of the rating icons, we can use font-size. Using height and width will not work as it increases the size of the container they're in.

For example:

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

will increase the size of the icon further than just .MuiRating-sizeLarge which is their size if you set size="large". For reference, that size is about 1.8rem.

Solution 2:[2]

Have you tried to set the icon class of the rating component to a class which defines a new width and height?

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

and then:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Rainer Tonmensch

Related Questions