我将使用npm来开发一个小部件。
我想使用material-ui Ratin组件,并已经集成了它。但是当我将小部件放在网页上时,它的html字体大小为62.5%,因此组件太小了,因为在图标样式中,高度和宽度都有1em单位。
截图。
这是我的代码:
虽然我已经能够使用样式更改颜色,但我无法修改下面的内容。如何更改图标的属性?
编辑:
如果我在CSS中使用类“icon”,则会更改星形图标的父级,而它们仍将保持1em x 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);