dva 是一種基于 React 的輕量級框架,它提供了一種便捷的方法來管理組件、狀態和路由。同時,dva 還支持模塊化的 CSS,這種方式可以減少 CSS 的文件大小,提高代碼的可維護性。
在 dva 中,可以通過使用import style from './index.css'
的方式引入 CSS 文件。這種方式可以將 CSS 文件與組件一起打包,避免了瀏覽器的額外請求。
在組件內部,通過className={style.demo}
的方式來使用 CSS 類。這里的demo
就是 CSS 文件中定義的類名。使用方式與普通的 CSS 完全一樣,但是可以通過模塊化的方式防止不同組件之間的 CSS 沖突。
.demo { color: red; }
在 dva 中,還支持一種特殊的樣式寫法,即使用:global
前綴來聲明全局樣式。這種方式可以在模塊化的 CSS 中使用全局樣式,比如:global(.antd-btn)
就表示使用了 antd 的樣式。
:global(.antd-btn) { border-radius: 0; }
總之,dva 的 CSS 模塊化是一種非常便捷、靈活的方式來管理 CSS。它可以有效地降低代碼維護難度和文件大小,同時也能防止樣式沖突。在使用 dva 進行開發時,一定要嘗試使用這種方式來管理組件的樣式。