在 typescript 中添加 css 樣式的方法有兩種：html 模板字符串：使用 classname 屬性添加類名使用內聯樣式設置樣式css 模塊：導入 css 文件使用導入的類名添加樣式
如何在 typescript 中添加 CSS 樣式
在 TypeScript 中添加 CSS 樣式的方法取決于用于創建應用程序的技術棧。以下列出了兩種最常見的技術棧及其對應的 CSS 樣式添加方法：
-
在模板字符串中使用 className 屬性添加類名：
立即學習“前端免費學習筆記（深入）”；
const MyComponent = () => { return <div className="my-class">...</div>; };登錄后復制 -
在模板字符串中使用內聯樣式：
const MyComponent = () => { return <div style={{ color: 'red' }}>...</div>; };登錄后復制
2. CSS 模塊（webpack、Rollup 等）
- 安裝 css-loader 和 style-loader npm 包。
-
在 JavaScript 模塊中導入 CSS 文件：
import styles from './my-styles.css';
登錄后復制 - 使用導入的類名，例如 styles.myClass，在組件中添加樣式。
具體步驟：
使用模板字符串：
- 為要添加樣式的 HTML 元素創建模板字符串。
- 在 className 屬性中指定類名。
- 將模板字符串分配給一個變量或將其直接渲染到 dom。
使用 CSS 模塊：
- 在 JavaScript 模塊中導入 CSS 文件。
- 將導入的 CSS 類名分配給一個變量。
- 在組件的樣式屬性中使用變量來應用樣式。
示例：
import React from 'react'; import styles from './my-styles.css'; const MyComponent = () => { return <div className={styles.myClass}>...</div>; };
登錄后復制
注意：
- CSS 模塊可以防止樣式沖突，但對于跨模塊共享樣式可能不太方便。
- 對于復雜或可動態化的樣式，可以使用 CSS-in-JS 庫，例如 styled-components 或 emotion。
