react结合typeScript中CSS的模块化开发

 前端开发中，正常引用css都是全部引用 import  './App.css'，但是在react项目中，倾向于模块化开发，那么如何对css进行模块化开发呢。

1、首先在项目src的根目录新建文件名为custom.d.ts的文件，添加css对象模块的配置

declare module "*.css" {
  const css: { [key: string]: string }
  export default css
}

2、模块化文件命名：修改App.css文件的文件名为App.module.css

3、在组件中引入样式的对象

import styles from './App.module.css';

4、DOM中根据对象进行样式的绑定

    <div className={styles.app}>
      <header className={styles.appHeader}>
        <img src={logo} className={styles.appLogo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className={styles.appLink}
          href="