Estoy usando componentes con estilo para mi proyecto ReactJS. Tengo algunas etiquetas h1 pero quiero modificar solo partes del texto para que sean de diferentes colores. Por ejemplo, del texto "Descubre nuevas suscripciones para lo que quieras". Estoy tratando de hacer que "Descubrir" tenga un color diferente.
Esto es lo que probé hasta ahora:
Creé una nueva función en la carpeta de componentes con estilo llamada (si la etiqueta h1 se llama InfoH3)
export const InfoH3Pink = estilo (InfoH3) color: #FA8072;
y colóquelo en el archivo de componentes alrededor de las etiquetas de texto:
<InfoH3> <InfoH3Pink>Discover</InfoH3Pink> new subscription for whatever you'd like </InfoH3>antes de rodearlo con la nueva etiqueta de componente con estilo
después de usar las nuevas etiquetas de componentes con estilo
Esto funciona pero crea una nueva línea. El "Descubrir" se convierte en una línea separada del resto del texto. Sin embargo, quiero que estén en la misma línea que el texto normal, excepto que el color sea diferente.
¿Algunas ideas?
Prueba esto
<InfoH3Pink styles={{color: "red"}}>...</InfoH3Pink>Puedes arreglar esto de cualquiera de las 2 maneras:
<span> dentro de un elemento <h*> para aplicar estilos únicosdisplay: inline en la definición de estilo de <InfoH3Pink/><span> dentro de un elemento <h*> para aplicar estilos únicos Una forma mejor que anidar un elemento <h1> dentro de otro <h1> sería usar el elemento <span> e intercalarlo entre el elemento <h1> . Esto se debe a que un elemento <span> siempre heredará los estilos del elemento principal <h*> que lo rodea; es un comportamiento HTML predeterminado. Este método es más semánticamente correcto desde una perspectiva HTML porque <h*> s no debería envolver otros <h*> s.
export const InfoH3Pink = styled.span` color: #FA8072; `; // `<InfoH3Pink/>` will automatically inherit styles from <InfoH3/> // and still apply its own unique styles. <InfoH3> <InfoH3Pink>Discover</InfoH3Pink> new subscription for whatever you'd like </InfoH3>display: inline en la definición de estilo de <InfoH3Pink/> Sin embargo , si aún desea usar un elemento <h*> para el texto resaltado, puede configurar display: inline en la definición de estilo de <InfoH3Pink/> para que tome solo el ancho requerido.
export const InfoH3Pink = styled(InfoH3)` color: #FA8072; display: inline; `;Los elementos de encabezado (h1,h2,h3,h4,h5,h6) son por defecto :
display:block;
Esa es la razón por la que se mueven a otra línea. Para abordar eso, debe anular el componente InfoH3 la propiedad para:
display:inline
Entonces, debería verse como algo como esto:
const InfoH3 = styled.h1`display:inline;` const InfoH3Pink = styled(InfoH3)`color: #FA8072;` Una de las cosas más importantes que debe recordar es la reutilización. Entonces, si tiene un mismo color en diferentes partes de su aplicación y se usa con diferentes encabezados, es un gran caso para que lo haga más dinámico. Para abordar eso, debe usar la etiqueta <span> en lugar de cambiar el atributo de encabezado principal. <span> es similar a <div> pero en lugar de ser display:block es display:inline . Por lo tanto, puede usarlo con diferentes encabezados y, si está envuelto alrededor del encabezado, hereda el tamaño de fuente, el peso, etc. Por lo tanto, puede usarlo con diferentes encabezados.
const InfoH3 = styled.h1`display:inline;` const HeadingPink = styled.span`color: #FA8072;`