DEV Community

loading...
Cover image for Styled-components with typescript

Styled-components with typescript

amankumarsingh01 profile image Aman Kumar Singh Updated on ・1 min read

First lets discuss what is styled components and how it is useful :-

styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.

The Motivation behind styled components were the following
1.Automatic critical CSS
2.No class name bugs
3.Easier deletion of CSS
4.Simple dynamic styling
5.Painless maintenance
6.Automatic vendor prefixing

How we can use styled-component with typescript

consider this example

const DIV = styled.div`
  color: red;
  font-size : 21px;
  margin-left : 1.5rem;
  &::before {
    content: "<div>";
    font-family: "La Belle Aurore", cursive;
    color: yellow;
    font-size: 18px;
    position:absolute;

  }
  &::after {
    content: "</div>";
    font-family: "La Belle Aurore", cursive;
    color: yellow;
    font-size: 18px;
    position:absolute;
  }
`;
Enter fullscreen mode Exit fullscreen mode

So if you are not passing any props for dynamic styling then there is no difference.

Lets Consider you are using something like this

<DIV backgroound ="red" color = "yellow" />

for using this type of component using styled components we need to have a interface for the props variables like this

interface StyledDivProps {
    background: text;
    color : text,
}

const DIV = styled.div<StyledDivProps>`
  color: ${({ color })=> color };
  background-color: ${({ background })=> background };
  font-size : ${Constants.FONT_SIZE_H1};
  margin-left : 1.5rem;
  &::before {
    content: "<div>";
    font-family: "La Belle Aurore", cursive;
    color: green;
    font-size: 18px;
    position:absolute;

  }
  &::after {
    content: "</div>";
    font-family: "La Belle Aurore", cursive;
    color: green;
    font-size: 18px;
    position:absolute;
  }
`;

Enter fullscreen mode Exit fullscreen mode

This is how you can use styled-components with typescript.

Discussion (0)

pic
Editor guide