如何在创建react.js组件时设置它的样式？

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

  return <div style={styles}>Hello World</div>;
};

// MyComponent.jsx
const MyComponent = () => {
  return <div className="my-component">Hello World</div>;
};

// styles.css
.my-component {
  color: red;
  font-size: 16px;
  font-weight: bold;
}

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

const MyComponent = () => {
  return <div className={styles.myComponent}>Hello World</div>;
};

// styles.module.css
.myComponent {
  color: red;
  font-size: 16px;
  font-weight: bold;
}