Как добавить текстовую строку в компонент стиля React

Question

Я изучаю Styled-компонент: я хотел бы, чтобы мой код отображал текстовую строку (Ваш личный тренер), но я не хочу, чтобы он был в файле 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>
}

Если вам нужна дополнительная помощь со стилевым компонентом, не стесняйтесь заходить на их документы

Если вы хотитедля повторного использования компонента передайте реквизит для такого сообщения:

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