How do I apply media queries in React?

How do I apply media queries in React?

You can use CSS-in-JS libraries like styled-components or Emotion, or you can use regular CSS files with media queries.

Can you show me an example using styled-components?

Sure! Here's a simple example:

import styled from 'styled-components';

const Container = styled.div`
  background: lightblue;
  @media (max-width: 600px) {
    background: lightcoral;
  }
`;

function App() {
  return <Container>Hello World!</Container>;
}

What if I want to use plain CSS instead?

You can create a CSS file with media queries like this:

.container {
  background: lightblue;
}

@media (max-width: 600px) {
  .container {
    background: lightcoral;
  }
}

Then import it in your React component.

Are there any libraries that help with responsive design?

Yes, libraries like Bootstrap, Material-UI, and Ant Design provide built-in responsive design features that can simplify your work.