How can I implement responsive design using CSS-in-JS?

How can I implement responsive design using CSS-in-JS?

You can use libraries like styled-components or Emotion to create responsive styles. For example, you can use media queries within your styled components.

Can you show me an example of a media query in styled-components?

Sure! Here's a simple example:

import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  @media (max-width: 768px) {
    background-color: lightblue;
  }
`;

This will change the background color when the screen width is 768px or less.

What about using CSS variables for theming?

CSS variables can be very useful for theming! You can define them in your global styles and use them in your styled components. For example:

:root {
  --primary-color: #3498db;
}

const Button = styled.button`
  background-color: var(--primary-color);
`;