如何放大Material-ui Rating图标

Question

我使用npm来展示开发一个小部件。我想使用material-ui ratn组件，我已经整合了它。但是当我把这个小部件放在网页上时，它的html字体大小是:62.5%，所以这个组件太小了，因为在图标样式中，有一个1em的高度和宽度单位。截图。

这是我的代码:

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中的类图标改变星图标的父母当他们继续1 em x 1 em大小。更改图标的截图

Answer 1

要增加评级图标的大小，我们可以使用font-size。使用高度和宽度将无法工作，因为它会增加它们所在的容器的大小。

例如:

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

将增加图标的大小，而不仅仅是.MuiRating-sizeLarge，这是它们的大小，如果您设置size="large"。作为参考，该尺寸约为1.8rem。

Answer 2

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

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

Answer 3

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

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