如何在React中仅将css应用于此组件？

import React from 'react';

const MyComponent = () => {
  const styles = {
    color: 'red',
    fontSize: '16px',
    // 其他样式属性
  };

  return <div style={styles}>这是我的组件</div>;
};

export default MyComponent;

/* MyComponent.module.css */
.myComponent {
  color: red;
  font-size: 16px;
  /* 其他样式属性 */
}

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

const MyComponent = () => {
  return <div className={styles.myComponent}>这是我的组件</div>;
};

export default MyComponent;

npm install styled-components

import React from 'react';
import styled from 'styled-components';

const StyledComponent = styled.div`
  color: red;
  font-size: 16px;
  /* 其他样式属性 */
`;

const MyComponent = () => {
  return <StyledComponent>这是我的组件</StyledComponent>;
};

export default MyComponent;