I am using npm to show develop a widget. I want to use material-ui Ratin ponent and I have integrate it. But when I place the widget in a webpage, it has a html font-size: 62.5%, so the ponent 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 ponent="fieldset" mb={3} borderColor="transparent">
        <Typography ponent="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);

I am using npm to show develop a widget. I want to use material-ui Ratin ponent and I have integrate it. But when I place the widget in a webpage, it has a html font-size: 62.5%, so the ponent 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 ponent="fieldset" mb={3} borderColor="transparent">
        <Typography ponent="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

• javascript
• css
• node.js
• material-ui

3 Answers 3

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.

Finally I solve it with this code because I was no able to enter to the icon itself:

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

Have you tried to set the icon class of the rating ponent 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}
        />