Pass Props to CSS in styled-components with typescript.

CSS styling is important to customize any react component. So styled-component is a very good library for starting.

const Container = styled.div`
  ${css`
    width: 240px;
  `}
`;

use the above container in the React component.

return(
  <Container>
    Hello World!
  </Container>
)

🤔 How to pass my custom width inside the container?

Thinking and Googling.......

💡 Let me create a Type definition with width prop.

type ContainerType = {
  width?: number; ///Passing Optional Props
};

🤔 Now how can I use it in container?

const Container = styled.div<ContainerType>`
  ${css`
    width: ${(props: ContainerType) =>
      props.width !== undefined ? props.width + "px" : 240px};
  `}
`;

Now again render in React

return(
  <Container width={300}>
    Hello World!
  </Container>
)

🎉 It's working !!!

Many Thanks for Reading this small content.

Blog

Pass Props to CSS in styled-components with typescript.

Umesh Verma

Join Our Newsletter. No Spam, Only the good stuff.

Related