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