即使没有导入，CSS文件也会应用于另一个反应组件

您好，我正在使用 React 构建一个网站，我想为我的 CSS 使用 .CSS 文件，并且我在我的组件文件中使用了 import './example.css'。例子：

import React from 'react';
import 'Home.css';
const Home = () => {
return (
<div className="example">
          Hi
</div>
)
}

如果我创建另一个页面但不导入此 CSS 文件，我会在我的另一个页面其他页面上获取样式：

import React from 'react';

const About= () => {
return (
<div className="example">
          Hi
</div>
)
}

有什么原因和解决办法吗？

回答

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

const Home = () => {
  return (
    <div className={styles.example}>
          Hi
    </div>
  )
}