Q1. What are styled-components?
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 styled from 'styled-components'. Then define a styled element: const Button = styled.button` background: blue; color: white; `;. Then use . 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: const Button = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; `; Then
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.
Q5. Can you extend styles in styled-components?
Yes, using styled(Component) you can create a new component that inherits the styles of another. For example, const BlueButton = styled(Button)` background: blue; `;.