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

You can update your component to look like this:

import styled from 'styled-components';

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

export default function Footer({text}){
  return   <footer className="site-footer">
    <StyledText>{text}</StyledText>
    <Copyright
      link={'https://hotmail.com'}
      text={text}/>
  </footer>;
}

You will be able to call your Footer component like:

<Footer text="HELLO"/>

Hope this helps,