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

最新推荐文章于 2024-01-08 11:27:33 发布

原创

最新推荐文章于 2024-01-08 11:27:33 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了在React项目中结合TypeScript进行CSS模块化开发的方法。通过创建custom.d.ts配置CSS对象模块，将CSS文件命名为.module.css，并在组件中引入样式对象，实现了样式的绑定。同时提醒在DOM中会存在编译后的字符串，模块化样式和全局引用需灵活运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发中，正常引用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="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >