如何在React中正确设置组件样式

const styles = {
  container: {
    backgroundColor: 'red',
    padding: '10px',
    borderRadius: '5px',
  },
  text: {
    color: 'white',
    fontSize: '16px',
  },
};

function MyComponent() {
  return (
    <div style={styles.container}>
      <span style={styles.text}>Hello, World!</span>
    </div>
  );
}

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

function MyComponent() {
  return (
    <div className={styles.container}>
      <span className={styles.text}>Hello, World!</span>
    </div>
  );
}

import styled from 'styled-components';

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

const Text = styled.span`
  color: white;
  font-size: 16px;
`;

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