如何在react中设置嵌套css的样式？

const styles = {
  container: {
    backgroundColor: 'red',
    padding: '10px',
    '& .nested': {
      color: 'blue',
      fontSize: '16px',
    },
  },
};

function MyComponent() {
  return (
    <div style={styles.container}>
      <p className="nested">Nested CSS</p>
    </div>
  );
}

// MyComponent.module.css
.container {
  background-color: red;
  padding: 10px;
}

.container .nested {
  color: blue;
  font-size: 16px;
}

// MyComponent.jsx
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.container}>
      <p className={styles.nested}>Nested CSS</p>
    </div>
  );
}

import styled from 'styled-components';

const Container = styled.div`
  background-color: red;
  padding: 10px;

  .nested {
    color: blue;
    font-size: 16px;
  }
`;

function MyComponent() {
  return (
    <Container>
      <p className="nested">Nested CSS</p>
    </Container>
  );
}