javascript - 样式组件文本或段落

Question

是否可以使用 styled-components 为文本或段落设置样式？如果是，我如何将文本传递到组件中？

例如，我有这个 Footer 组件:

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

export default Footer;

我想从全局类切换到js中的css，这就是为什么我想到使用styled-components。现在我尝试了这个:

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

但是如果我注释掉该段落并使用 StyledText 组件，则不会显示任何内容。如果我尝试传递 Styled Component text={'HELLO'} 我的应用程序崩溃。如何以使用样式化组件的方式转换我的页脚？

Answer 1

您可以将您的组件更新为如下所示:

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

您将能够像这样调用您的Footer 组件:

<Footer text="HELLO"/>

希望对您有所帮助，