javascript - Styled-Components text eller stycken

Är det möjligt att styla text eller stycken med styled-components? Om ja, hur kan jag skicka text till komponenten?

Till exempel, jag hade denna Footer-komponent:

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

export default Footer;

Jag ville byta från globala klasser till CSS i JS, vilket är anledningen till att jag tänkte på att använda styled-components. Nu testade jag detta:

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

Men om jag kommenterar ut stycket och använder StyledText-komponenten visas inget. Om jag försöker skicka Styled Component text={'HELLO'} kraschar min app. Hur kan jag omvandla min footer på ett sätt som använder styled-components?

Svar #1

Du kan uppdatera din komponent så att den ser ut så här:

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

Du kommer att kunna kalla på din Footer-komponent så här:

<Footer text="HELLO"/>

Hoppas det här hjälper,

Svar #2

styled-components hanterar bara stilarna för en komponent och inte innehållet. Alla children kommer att bevaras, så du kan göra något som detta:

// JSX
<StyledText>Hello</StyledText>

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