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

const MyComponent = () => {
  const nestedStyle = {
    color: 'red',
    fontSize: '16px',
    fontWeight: 'bold'
  };

  return (
    <div style={nestedStyle}>
      <p>This is a nested component with custom styles.</p>
    </div>
  );
};

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

const MyComponent = () => {
  return (
    <div className={styles.nestedComponent}>
      <p>This is a nested component with custom styles.</p>
    </div>
  );
};

import styled from 'styled-components';

const NestedComponent = styled.div`
  color: red;
  font-size: 16px;
  font-weight: bold;
`;

const MyComponent = () => {
  return (
    <NestedComponent>
      <p>This is a nested component with custom styles.</p>
    </NestedComponent>
  );
};