Styled component The biggest headache when using styled component is that there is no hint:

So how can the styled component be styled everywhere?

Styled – Component The following code details how to use styled-component elegantly

First, you should know how to write CSS in JS code when the elegant pop-up prompt?

That must be defining the type. After defining the type, we add it to the type of the attrs parameter so that we can use the type hint gracefully when using attrs

As follows:

/ /! Interface ITitleProps {color: string, children: any, fontSize? : string, } const Title = styled.div.attrs((props: ITitleProps)=>({ color: props.color, // ! set default value fontSize: props.fontSize || '10px', }))` height: 200px; color: ${props => props.color}; font-size: ${props => props.fontSize}; `;Copy the code

Secondly, how can we use the Styled generics provided by the style network when writing the string CSS

First, why styled-component can be called as a string like fun

If you’ve seen es, you know that backquotes can also call functions, so you can search for details. So now that we know this is a function call, can we use generics for parameter type definitions? Of course you can

The code is as follows:

/ /! Interface ITitleProps {color: string, children: any, fontSize? : string, } const Title = styled.div.attrs((props: ITitleProps)=>({ color: props.color, // ! set default value fontSize: props.fontSize || '10px', }))<ITitleProps>` height: 200px; color: ${props => props.color}; / /! use props value font-size: ${props => props.fontSize}; `;Copy the code

Now that we’ve solved the problem of code prompts when we write the code, right?

So the question is, will we get a hint when we call it?

Of course the answer is no, right? So how do we gracefully pop up when a function is called?

A library is used here, ts-Styled – Component

The library allows us to export styled- Components using generics to type props so that we can gracefully pop up type cues when we call them.

So how do you use it?

StyledTs from 'ts-Styled -component' export const NPM I ts-styled-component // After the setup is complete we start writing the code Titles = StyledTs<ITitleProps>(MyTitle);Copy the code

Let’s go to the IDE and see if there are any hints

The hint comes out ~

Just share your own opinion, if you have any questions can be corrected ~