如何将css样式表链接到react类

import React from 'react';

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

  return (
    <div style={styles}>
      This is my component.
    </div>
  );
};

export default MyComponent;

.myComponent {
  color: red;
  font-size: 16px;
  font-weight: bold;
}

import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.myComponent}>
      This is my component.
    </div>
  );
};

export default MyComponent;

body {
  background-color: #f0f0f0;
}

.myComponent {
  color: red;
  font-size: 16px;
  font-weight: bold;
}

import React from 'react';
import './styles.css';

const MyComponent = () => {
  return (
    <div className="myComponent">
      This is my component.
    </div>
  );
};

export default MyComponent;