Loading

Quipoin Menu

Learn • Practice • Grow

react / Styled Components
mcq
Direction: Choose the correct option

Q1.

What is styled-components?
A. A utility-first CSS framework
B. A library for writing CSS in JavaScript using tagged template literals
C. A CSS preprocessor
D. A built-in React styling method
Direction: Choose the correct option

Q2.

How do you create a styled button using styled-components?
A. const Button = styled.button` background: blue; `;
B. <button style={{background: 'blue'}} />
C. styled.button('background: blue')
D. <StyledButton>
Direction: Choose the correct option

Q3.

How can you adapt a styled component based on props?
A. Using data attributes
B. Using if statements
C. Using class names
D. Use interpolations: ${props => props.primary ? 'blue' : 'gray'}
Direction: Choose the correct option

Q4.

What does the 'styled' function return?
A. A style object
B. A React component with the specified styles
C. A string of CSS
D. A CSS class name
Direction: Choose the correct option

Q5.

How do you extend an existing styled component?
A. const ExtendedButton = styled(Button)` ... `;
B. const ExtendedButton = Button.extend` ... `;
C. Using inheritance
D. const ExtendedButton = styled.button` ... `;