Soy nuevo en React y estoy usando los íconos de la interfaz de usuario del material del paquete npm ( https://www.npmjs.com/package/@material-ui/icons ) y estoy mostrando íconos dentro de un componente de React como tal:
Importador:
import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';y representación:
readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>} Sin embargo, dado que KeyboardArrowRightIcon es un SVG proporcionado por el paquete npm, viene con su propio color de relleno:
Por ejemplo: <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...
Sé que puedo anular este color al tener un atributo de estilo dentro del elemento, por ejemplo:
<KeyboardArrowRightIcon style={{ fill: '#0072ea' }} /> Pero, ¿hay alguna forma de convertir esto en una variable SCSS ( style={{ fill: $link-color }} )?
Me preocupa que si el color del enlace cambia en la hoja de estilo, alguien tendrá que buscar todas estas instancias codificadas más adelante.
<HomeIcon /> <HomeIcon color="primary" /> <HomeIcon color="secondary" /> <HomeIcon color="action" /> <HomeIcon color="disabled" /> <HomeIcon style={{ color: green[500] }} /> <HomeIcon style={{ color: 'red' }} /> <HomeIcon fontSize="small" /> <HomeIcon /> <HomeIcon fontSize="large" /> <HomeIcon style={{ fontSize: 40 }} /> <Icon>add_circle</Icon> <Icon color="primary">add_circle</Icon> <Icon color="secondary">add_circle</Icon> <Icon style={{ color: green[500] }}>add_circle</Icon> <Icon fontSize="small">add_circle</Icon> <Icon style={{ fontSize: 30 }}>add_circle</Icon> <Icon className="fa fa-plus-circle" /> <Icon className="fa fa-plus-circle" color="primary" /> <Icon className="fa fa-plus-circle" color="secondary" /> <Icon className="fa fa-plus-circle" style={{ color: green[500] }} /> <Icon className="fa fa-plus-circle" fontSize="small" /> <Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />Simplemente agregue un fill: "green"
Ejemplo: <Star style={{fill: "green"}}/>
La forma más sencilla de especificar/anular el color de un ícono en Material-UI es usar un nombre de clase CSS personalizado.
Suponga que desea mostrar una casilla de verificación verde en lugar de un triángulo rojo, según el resultado de algún proceso.
Creas una función en algún lugar dentro de tu código, por ejemplo, así:
function iconStyles() { return { successIcon: { color: 'green', }, errorIcon: { color: 'red', }, } }Luego aplica makeStyles a esa función y ejecuta el resultado.
import { makeStyles } from '@material-ui/core/styles'; ... const classes = makeStyles(iconStyles)(); Dentro de su función de renderizado, ahora puede usar las classes de objetos:
const chosenIcon = outcome ? <CheckCircleIcon className={classes.successIcon} /> : <ReportProblemIcon className={classes.errorIcon} />;La función que mencioné primero en esta respuesta en realidad acepta un tema como entrada y le permite modificar/enriquecer ese tema: esto asegura que sus clases personalizadas no se vean como excepciones, sino como integraciones dentro de una solución visual más completa (por ejemplo , los colores de los íconos en un tema se ven mejor como codificaciones ).
Material-UI es muy rico y lo animo a explorar también otrosmecanismos de personalización existentes.