CODEWITHSUNDEEP
reactjsstyled-components
MicheleN
MicheleN

Reputation: 11

How to add a text line to a React styled-component

I am learning Styled-component: I would like my code to render a text line (Your personal trainer) but I do not want to have it in App.js file. How can I do that? 

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;

Upvotes: 1

Views: 1086

Answers (1)

João Cunha
João Cunha

Reputation: 10307

Assuming you might want a span:

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

If you need more help with styled-component feel free to drop on their docs

If you want to re-use the component pass a prop for a message like this:

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

Upvotes: 1

Related Questions