Styled-components with typescript

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

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

Lets Consider you are using something like this

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

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