Styled-Components Text or Paragraphs

Question

Is it possible to style Text or Paragraphs with styled-components? If yes, how can I pass text into the component?

For example, I had this Footer component:

const Footer = () => (
  <footer className="site-footer">
    <p className="text"> HELLO</p>
    <Copyright
      link={'https://hotmail.com'}
      text={'HELOO'}></Copyright>
  </footer>
);

export default Footer;

I wanted to switch from global classes to css in js, which is why I thought of using styled-components. Now I tried this:

export const StyledText = styled.text`
    text: Hellooo
    color: white;
    text-align: center;
`

But if I comment out the paragraph and use StyledText component, nothing shows up. If I try passing Styled Component text={'HELLO'} my app crashes. How can I convert my footer in such a way that it uses styled-components?

Answer 1

styled-components just deals with the styles of a component and not the content. All children will be preserved, so you can do something like this:

// JSX
<StyledText>Hello</StyledText>

// StyledText.js
export default styled.p`
  color: white;
  text-align: center;
`;