内联样式通过JavaScript对象设置动态样式，Vue用:style绑定；2. 单文件组件标签最常用，React可配合CSS Modules；3. 外部CSS文件通过import或@import引入；4. CSS Modules避免类名冲突，React导入模块使用className={styles.xxx}，Vue用和$style；5. 预处理器如Sass需安装loader，Vue用lang="scss"，React可直接引入.scss文件。选择依据项目需求与团队规范。

在 Vue 或 React 项目中使用 CSS，有多种方式可以引入样式，以下是常见且实用的方法。

1. 内联样式（Inline Styles）

适用于动态样式或简单样式设置。通过 JavaScript 对象传入 style 属性。

React 示例：

{`function MyComponent() {
  const style = { color: 'blue', fontSize: '16px' };
  return Hello;
}`}

Vue 示例（在模板中）：

注意：Vue 中需用 :style 绑定对象。

2. 单文件组件中的

这是最常用的方式，将 CSS 写在组件文件内部。

Vue 示例：

React 中虽无单文件结构，但可搭配 CSS Modules 使用类似效果。

3. 外部 CSS 文件导入

创建独立的 .css 文件并在组件中导入。

• 创建 MyComponent.css
• 在组件 JS/JSX/Vue 文件中引入

React 示例：

import './MyComponent.css';

function MyComponent() {
  return 标题;
}

Vue 示例：

4. 使用 CSS Modules（推荐用于避免类名冲突）

将 CSS 文件作为模块导入，确保局部作用域。

文件命名：MyComponent.module.css

.title {
  font-size: 20px;
  color: green;
}

React 中使用：

import styles from './MyComponent.module.css';

function MyComponent() {
  return 
Hello
;
}

Vue 中启用需配置，或在

5. 使用预处理器（Sass/SCSS/Less）

支持嵌套、变量等特性，提升开发效率。

• 确保安装对应 loader（如 sass-loader）
• 使用 lang 属性指定语言

Vue 示例：

React 中可直接 import .scss 文件（Create React App 已支持）：

import './App.scss';

基本上就这些。选择哪种方式取决于项目需求和团队规范。局部样式推荐用 CSS Modules，全局样式可用普通引入，复杂逻辑可结合预处理器。