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?
Try This
<InfoH3Pink styles={{color: "red"}}>...</InfoH3Pink>
You can fix this in either of 2 ways:
<span> element within a <h*> element to apply unique stylesdisplay: inline in <InfoH3Pink/>'s style definition<span> Element within a <h*> Element to Apply Unique StylesA 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>
new subscription for whatever you'd like
</InfoH3>
display: inline in <InfoH3Pink/>'s style definitionHowever, 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;
`;
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;`
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;`