How can I use media queries in React?

How can I use media queries in React?

You can use media queries in React by applying CSS styles conditionally based on screen size. Would you like to see an example?

Yes, please show me an example!

Sure! You can use the styled-components library or inline styles with JavaScript. Here's a simple example using styled-components:

import styled from 'styled-components';

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

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

This changes the background color based on the screen width.

What if I want to use plain CSS instead?

You can definitely use plain CSS! Just create a CSS file with your media queries:

.container {
  background: lightblue;
}

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

Then, import the CSS file in your React component.