Q1. What are styled-components?
It uses tagged template literals to style components.
The styles are scoped to the component, and you can use props for dynamic styling.
styled-components is a CSS-in-JS library that allows you to write CSS directly in your JavaScript files.It uses tagged template literals to style components.
The styles are scoped to the component, and you can use props for dynamic styling.
Q2. How do you create a styled component?
Import
Then define a styled element:
The styles are applied only to that component.
styled from 'styled-components'.Then define a styled element:
const Button = styled.button`
background: blue;
color: white;
`;
<Button>Click</Button>.The styles are applied only to that component.
Q3. How do you pass props to styled-components?
You can interpolate a function that receives props.
Example:
Example:
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
`;
<Button primary>.Q4. What are the benefits of styled-components?
They provide scoped styles, dynamic theming, and eliminate class name bugs.
They also support server-side rendering and can be easily maintained alongside the component.
They also support server-side rendering and can be easily maintained alongside the component.
Q5. Can you extend styles in styled-components?
Yes, using
For example,
styled(Component) you can create a new component that inherits the styles of another.For example,
const BlueButton = styled(Button)` background: blue; `;.