Quiz for Styled Components

Q1: What are Styled Components in React?

A. A library for CSS-in-JS styling B. Global CSS files C. Inline styles D. Preprocessor for CSS

Q2: How do you create a styled button using Styled Components?

A. const Button = styled.button`color: blue;`; B. const Button = <button>; C. const Button = css`color: blue;`; D. const Button = style.button;

Q3: How are styles scoped in Styled Components?

A. Scoped locally to the component B. Global scope C. Scoped to parent component D. Scoped to sibling components

Q4: Can you pass props to Styled Components for dynamic styling?

A. Yes, props can control styles B. No, static styles only C. Only with CSS variables D. Only with inline styles

Q5: What does the styled function return?

A. A React component B. A CSS class C. An HTML element D. A style object

Q6: How do you extend styles of a Styled Component?

A. Using styled(Component)`...` B. Using extend(Component) C. Using CSS Modules D. Using inline styles

Q7: Is server-side rendering supported by Styled Components?

A. Yes, fully supported B. No C. Only partial support D. Only with plugins

Q8: Which package do you install to use Styled Components?

A. styled-components B. react-styled C. css-modules D. emotion

Q9: Can you use global CSS styles with Styled Components?

A. Yes, via createGlobalStyle B. No, only scoped styles C. Only inline styles D. Only CSS Modules

Q10: How do you apply pseudo-classes like :hover in Styled Components?

A. By using normal CSS syntax inside template literal B. By JavaScript events C. By inline styles D. Not supported

Q11: Can you define keyframe animations in Styled Components?

A. Yes, using keyframes helper B. No animations C. Only CSS files D. Only inline styles

Q12: How does Styled Components generate class names?

A. Unique hashed class names B. Plain class names C. Global class names D. Random IDs

Q13: Can you use theming with Styled Components?

A. Yes, with ThemeProvider B. No theming C. Only with CSS variables D. Only with inline styles

Q14: Is it possible to nest selectors in Styled Components?

A. Yes, just like Sass B. No, only flat selectors C. Only with CSS files D. Only inline styles

Q15: How do you pass custom HTML attributes using Styled Components?

A. Using the as prop or standard React props B. Not possible C. Only via inline styles D. Only with className

Q16: Are Styled Components compatible with TypeScript?

A. Yes, with typings available B. No C. Only with plugins D. Only JavaScript

Q17: Can you use Styled Components in React Native?

A. Yes, there is a React Native version B. No C. Only web D. Only with plugins

Q18: What is a downside of using Styled Components?

A. Adds runtime overhead B. No downsides C. Requires CSS files D. No JS involved

Q19: How do you debug styles in Styled Components?

A. By using component display names and devtools B. Not possible C. Only with source maps D. Only with browser extensions

Q20: What is the difference between styled-components and CSS Modules?

A. CSS-in-JS vs CSS scoped files B. Both are same C. One is JS only D. Only CSS files