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