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?

CodePudding user response：

Try This

<InfoH3Pink styles={{color: "red"}}>...</InfoH3Pink>

CodePudding user response：

Heading elements (h1,h2,h3,h4,h5,h6) are by default:

display:block;

That is the reason way they are moved to another line. To tackle that you have to override InfoH3 component the property to:

display:inline

So, it should look like something like this:

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

But there is a slightly better way

One of the most important things that you should remember is reusability. So, if you have a same color within different parts of your app and it is used with different headings there is a great case for you to make it more dynamic. To tackle that you should use <span> tag instead of changing the parent heading attribute. <span> is similar to <div> but instead of being display:block it is display:inline. So you could use it with different headings and if it is wrapped around heading it inherits the font-size, weight, etc. So, you can use it with different headings.

const InfoH3 = styled.h1`display:inline;` 
const HeadingPink = styled.span`color: #FA8072;`

CodePudding user response：

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;
`;