I am currently utilizing npm to develop a widget. I aim to utilize the material-ui Rating component and have successfully integrated it. However, when I embed the widget on a webpage, the html font-size is set at 62.5%, causing the component to appear too small due to the icon style having a 1em unit in height and width. See screenshot for reference.
This is the code snippet:
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="No rating"
if (value===1){
text = "One star"
}
else if (value>1 && value<=5) {
text = ""+ value + " stars"
}
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);Although I managed to alter the color using styles, I'm unable to modify its size. Is there a way to adjust the properties of the icon?
EDIT: By applying the icon class in CSS, the parent of the star icons can be modified but they retain their original size of 1em x 1em. Check out updated icon changes in the screenshot provided.