React JS正在将我所有组件的样式插入应用程序CSS模块中

Question

我正在使用带有Create React App + Typescript的最新ReactJS，并且正在使用CSS模块。该应用程序架构为：

/components
   SignIn/
      SignIn.module.scss
      SignIn.tsx
   ResetPassword/
      ResetPassword.module.scss
      ResetPassword.tsx

在每个FC组件内部，我都包含这样的CSS：

登录组件

import React from 'react';
import styles from './SignIn.module.scss';

const SignIn: React.FC = props => { 
    ... 
    return {
       <div className={styles.container} />
    }
}
... 

ResetPassword组件

import React from 'react';
import styles from './ResetPassword.module.scss';

const ResetPassword: React.FC = props => { 
    ... 
    return {
       <div className={styles.card} />
    }
}
... 

我这样定义react-router-dom ...

   ...
   <BrowserRouter>
        <Switch>
             <Route path='/sing-in' component={SignIn} />
             <Route path='/reset-password' component={ResetPassword} />
        </Switch>
    </BrowserRouter>
    ...

问题：

无论我在<style>页还是在Sign-in页中，React都会插入每个组件的reset-password。

预期行为：

React仅为当前页面中显示的组件插入 CSS。

我尝试在每个exact中添加道具Route，但没有用。