Question

我正在学习样式化组件：我希望我的代码呈现文本行（您的私人教练），但我不想在App.js文件中使用它。我怎样才能做到这一点？

import styled from 'styled-components';

const StyledTextLine = styled('YOUR PERSONAL TRAINER')`
      color:#333333 100%;
      font-size: 17px;
      font-family: NeuropoliticalRg-Regular;
      word-spacing:0px;

`;

export default StyledTextLine;

Answer 1

假设您想要一个跨度：

const StyledTextLine = styled.span`
      color:#333333 100%;
      font-size: 17px;
      font-family: NeuropoliticalRg-Regular;
      word-spacing:0px;
`;

const TextLine = () => {
  return <StyledTextLine>YOUR PERSONAL TRAINER</StyledTextLine>
}

如果您需要有关样式组件的更多帮助，请随时关注他们的docs

如果您想重复使用该组件，请为以下消息传递道具：

const TextLine = ({ message }) => {
  return <StyledTextLine>{message}</StyledTextLine>
}

如何在React样式组件中添加文本行

1 个答案: