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