CODEWITHSUNDEEP
javascriptcssreactjstypescriptstyled-components
user13101751
user13101751

Reputation:

Styled-Components Text or Paragraphs

Is it possible to style Text or Paragraphs with styled-components? If yes, how can I pass text into the component?

For example, I had this Footer component:

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

export default Footer;

I wanted to switch from global classes to css in js, which is why I thought of using styled-components. Now I tried this:

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

But if I comment out the paragraph and use StyledText component, nothing shows up. If I try passing Styled Component text={'HELLO'} my app crashes. How can I convert my footer in such a way that it uses styled-components?

Upvotes: 3

Views: 7508

Answers (3)

Dennis Vash
Dennis Vash

Reputation: 53944

Yes, you can style every html element and every custom component as long its passes className.

This example covers pretty much the basic API:

const Text = styled.p`
  color: blue;
  text-align: center;
`;

const Copyright = ({ className, link, text }) => (
  <div className={className}>
    <Text>{link}</Text>
    <Text>{text}</Text>
  </div>
);

const StyledCopyright = styled(Copyright)`
  border: 1px black solid;
  ${Text} {
    color: palevioletred;
  }
`;

const Footer = () => {
  return (
    <footer>
      <Text>HELLO</Text>
      <Copyright link="https://hotmail.com" text="World" />
      <StyledCopyright link="https://hotmail.com" text="World" />
    </footer>
  );
};

Edit serene-hugle-qgsfy

Upvotes: 0

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4577

You can update your component to look like this:

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

You will be able to call your Footer component like:

<Footer text="HELLO"/>

Hope this helps,

Upvotes: 1

technophyle
technophyle

Reputation: 9149

styled-components just deals with the styles of a component and not the content. All children will be preserved, so you can do something like this:

// JSX
<StyledText>Hello</StyledText>

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

Upvotes: 0

Related Questions