Considere este fragmento de código:
<Typography className={classes.welcomeMessage} variant="h1"> A <span className={classes.redText}>smart nation </span> approach to <span className={classes.redText}>safety.</span> </Typography>Esencialmente, quiero tener una oración, pero algunas de las palabras en esa oración son de color rojo. redText y welcomeMessage contienen las mismas propiedades excepto por el hecho de que el color es diferente. Sin embargo, el texto aparece así:
Un enfoque de nación inteligente para la seguridad.
Supongo que el componente de tramo está jugando con el espacio. ¿Hay una solución fácil o una forma ideal de lidiar con esto?
Lo probé por el estilo y está funcionando perfectamente, debería haber algún problema con tus clases de estilos, prueba esto, funcionará perfectamente.
<Typography style={{ color: "blue" }} variant="h1"> A <span style={{ color: "red" }}>smart nation </span> approach to{" "} <span style={{ color: "red" }}>safety.</span> </Typography>Mi sugerencia es que, en Tipografía, puede intentar usar sx, por lo que al código le gustará esto:
<Typography sx={{ color: "blue" }} variant="h1"> A <span style={{ color: "red" }}>smart nation </span> approach to{" "} <span style={{ color: "red" }}>safety.</span> </Typography>