Styling in React — Interview Questions & Answers

Ques 1: What are the different ways to style React components?

Ans: React supports multiple styling approaches:

1. Inline styles
2. External CSS files
3. CSS Modules
4. CSS-in-JS libraries (e.g., Styled Components, Emotion)
5. Preprocessors like Sass/SCSS
6. Utility frameworks like Tailwind CSS

Ques 2: How do you apply inline styles in React?

Ans: Inline styles are defined as objects and passed to the style attribute.

const heading = { color: "blue", fontSize: "20px" };
<h1 style={heading}>Hello React</h1>;

Ques 3: What are the drawbacks of inline styles?

• No pseudo-classes (:hover)
• No media queries
• Difficult to reuse styles

Ques 4: How do you use external CSS in React?

Ans: Create a .css file and import it in your component:

import './App.css';

Then apply styles using class names:

<h1 className="title">Hello</h1>;

Ques 5: What are CSS Modules in React?

Ans: CSS Modules allow locally scoped CSS — meaning class names don’t conflict globally.

import styles from './App.module.css';
<h1 className={styles.title}>Hello</h1>;

Ques 6: What are the advantages of CSS Modules?

• No name conflicts
• Reusable and maintainable
• Easy to integrate with build tools

Ques 7: What is CSS-in-JS?

Ans: A technique where CSS is written directly in JavaScript using libraries like Styled Components or Emotion.

Ques 8: Example of using Styled Components?

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

<Button>Click Me</Button>;

Ques 9: Benefits of CSS-in-JS?

• Scoped styles
• Dynamic styling based on props
• Easier theming
• No global CSS pollution

Ques 10: What is Sass/SCSS and how is it used in React?

Ans: Sass is a CSS preprocessor that adds variables, nesting, and mixins.

Install:

npm install sass

Use in React:

// App.scss
$color: blue;
.title { color: $color; }

Then import:

import './App.scss';

Ques 11: What is Tailwind CSS?

Ans: Tailwind CSS is a utility-first CSS framework that provides ready-to-use classes for styling.

<h1 className="text-3xl font-bold text-blue-600">Hello Tailwind</h1>

Ques 12: How do you integrate Tailwind CSS with React?

Install Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure in tailwind.config.js

Import styles in index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ques 13: What are the benefits of using Tailwind CSS in React?

• Faster styling
• Responsive design utilities
• No CSS file management
• Easy theming

Ques 14: What is the difference between CSS Modules and Styled Components?

Ques 15: How can you implement Dark Mode in React?

Ans: Use a state variable or context to toggle class names:

const [dark, setDark] = useState(false);
<div className={dark ? 'dark-mode' : 'light-mode'}>
  <button onClick={() => setDark(!dark)}>Toggle</button>
</div>

Ques 16: How do you persist theme (dark/light) across refresh?

Ans: Store the theme preference in localStorage:

localStorage.setItem('theme', dark ? 'dark' : 'light');

Retrieve it on load:

const savedTheme = localStorage.getItem('theme');

Ques 17: What is Responsive Design in React?

Ans: Designing apps that adapt to various screen sizes using CSS media queries, Flexbox, Grid, or utility classes (like Tailwind).

Ques 18: How can you make a React app responsive?

• Use CSS Grid/Flexbox
• Use media queries
• Use responsive units (vw, %)
• Use libraries like react-responsive

Ques 19: What is the role of media queries in React styling?

Ans: They help apply CSS rules conditionally based on screen width or device type.

@media (max-width: 600px) {
  .container { flex-direction: column; }
}

Ques 20: What are CSS transitions and animations in React?

Ans: Used to create smooth visual effects. Can be done using CSS or libraries like Framer Motion and React Transition Group.

Ques 21: How do you dynamically change styles in React?

Ans: Use inline conditionals or dynamic class names:

<div className={isActive ? 'active' : 'inactive'}>Hello</div>

Ques 22: How do you share common styles between components?

• Create shared CSS files or modules
• Use Styled Components with mixins
• Define reusable UI components

Ques 23: How can you optimize performance with large CSS files?

• Code splitting
• Lazy loading components
• Using utility frameworks like Tailwind

Ques 24: What is ThemeProvider in Styled Components?

Ans: A wrapper that provides theme variables to all styled components.

<ThemeProvider theme={{ color: 'blue' }}>
  <App />
</ThemeProvider>

Ques 25: Why is modular styling important in large React apps?

• Avoid CSS conflicts
• Easier maintenance
• Improved scalability