如何将两个不同的样式表应用到一个React组件？

import React from 'react';
import './style1.css';
import './style2.css';

const MyComponent = () => {
  return (
    <div className="style1 style2">
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import styles1 from './style1.module.css';
import styles2 from './style2.module.css';

const MyComponent = () => {
  return (
    <div className={`${styles1.container} ${styles2.container}`}>
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;

import React from 'react';

const style1 = {
  backgroundColor: 'red',
  color: 'white',
};

const style2 = {
  backgroundColor: 'blue',
  color: 'yellow',
};

const MyComponent = () => {
  return (
    <div style={{ ...style1, ...style2 }}>
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;