在 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。