Estoy usando npm para mostrar el desarrollo de un widget. Quiero usar el componente material-ui Ratin y lo he integrado. Pero cuando coloco el widget en una página web, tiene un tamaño de fuente html: 62,5 %, por lo que el componente es demasiado pequeño porque en el estilo del icono hay una unidad de 1em de alto y ancho. captura de pantalla
Este es mi código:
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);Aunque he podido cambiar el color con los estilos, no puedo modificar eso abajo. ¿Cómo puedo cambiar esas propiedades del icono?
EDITAR: si uso el ícono de clase en css, cambio el padre de los íconos de estrella mientras continúan con un tamaño de 1em x 1em. captura de pantalla con cambios en el icono
Para aumentar el tamaño de los íconos de calificación, podemos usar el tamaño de fuente. El uso de alto y ancho no funcionará, ya que aumenta el tamaño del contenedor en el que se encuentran.
Por ejemplo:
<Rating name="rating" value={starValue} precision={0.1} size="large" readOnly sx={{ fontSize: "4rem" }} /> aumentará el tamaño del ícono más allá de solo .MuiRating-sizeLarge que es su tamaño si establece size="large" . Como referencia, ese tamaño es de aproximadamente 1,8 rem.
¿Ha intentado establecer la clase de icono del componente de calificación en una clase que define un nuevo ancho y alto?
const styles = theme => ({ iconFilled:{ color:theme.palette.primary.main, }, iconEmpty:{ color:theme.palette.primary.main }, //just some sample values icon: { width: 64, height: 64 })y entonces:
<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} />Finalmente lo resuelvo con este código porque no pude ingresar al ícono en sí:
icon = {<StarIcon style={{width:"32px",height:"32px"}}></StarIcon>} emptyIcon = {<StarOutlineIcon style={{width:"32px",height:"32px"}}></StarOutlineIcon>}