typescript怎么添加css样式

在 typescript 中添加 css 样式的方法有两种：html 模板字符串：使用 classname 属性添加类名使用内联样式设置样式css 模块：导入 css 文件使用导入的类名添加样式

如何在 typescript 中添加 CSS 样式

在 TypeScript 中添加 CSS 样式的方法取决于用于创建应用程序的技术栈。以下列出了两种最常见的技术栈及其对应的 CSS 样式添加方法：

1. html 模板字符串（React、vue 等）

• 在模板字符串中使用 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。