Search code examples
javascripthtmlcssreactjsstyled-components

How to use styled-components to edit text in components

I'm using styled components for my ReactJS project. I have some h1 tags but want to modify only parts of the text to be different colors. For example, from the text "Discover new subscriptions for whatever you'd like." I'm trying to make "Discover" a different color.

This is what I tried so far:

I created a new function in the styled-components folder called (if the h1 tag is called InfoH3)

export const InfoH3Pink = styled(InfoH3)color: #FA8072;

and put it in the components file around the text tags:

<InfoH3> <InfoH3Pink>Discover</InfoH3Pink> new subscription for whatever you'd like </InfoH3>

before surrounding it with the new styled component tag

after using the new styled components tags

This does work but it creates a new line. The "Discover" becomes a separate line from the rest of the text. However, I want them to be in the same line like normal text except for the color being different.

Any ideas?

Solution

  • You can fix this in either of 2 ways:

    • Use a <span> element within a <h*> element to apply unique styles
    • Set display: inline in <InfoH3Pink/>'s style definition

    Use a <span> Element within a <h*> Element to Apply Unique Styles

    A better way than nesting a <h1> element within another <h1> would be using the <span> element and sandwiching it in between the <h1> element. This is because a <span> element will always inherit the styles from its surrounding <h*> parent element - it's a default HTML behaviour. This method is more semantically correct from an HTML perspective because <h*>s shouldn't be wrapping other <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> 
    &nbsp;new subscription for whatever you'd like 
</InfoH3>

    Set display: inline in <InfoH3Pink/>'s style definition

    However, if you still wish to use a <h*> element for the highlighted text, you may set display: inline in <InfoH3Pink/>'s style definition to make it take just its required width.

    export const InfoH3Pink = styled(InfoH3)`
    color: #FA8072; 
    display: inline;
`;