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.
Top comments (0)