vue3 tsx写法如何使用scss class样式

在 Vue 3 的 TSX 写法中，如果你的 SCSS 文件中定义了一个类似 .abc-cbd 这样的类名（非嵌套样式），可以直接通过 CSS Modules 导出的对象来访问并使用它。

以下是详细的实现步骤和示例：

---

1. SCSS 文件定义

假设你的 SCSS 文件中定义了如下类名：

styles.module.scss：

/* 单层类名 */
.abc-cbd {
  color: green;
  font-size: 20px;
}

/* 嵌套类名（如果有） */
.parent {
  .child {
    color: blue;
  }
}

---

2. 导入并使用类名

在 TSX 文件中，通过 import 引入模块化的 SCSS 文件后，可以直接使用导出的类名对象。

示例 TSX 文件 (MyComponent.tsx)：

// MyComponent.tsx
import { defineComponent } from 'vue';
import styles from './styles.module.scss'; // 引入模块化的 SCSS 文件

export default defineComponent({
  name: 'MyComponent',
  setup() {
    return () => (
      <div>
        {/* 使用单层类名 */}
        <div class={styles['abc-cbd']}>This is abc-cbd</div>

        {/* 使用嵌套类名 */}
        <div class={styles.parent}>
          Parent
          <div class={styles.child}>Child</div>
        </div>
      </div>
    );
  },
});

---

3. 关键点解析

• 单层类名：对于像 .abc-cbd 这样的单层类名，可以通过 styles['abc-cbd'] 或 styles.abc_cbd 来访问。
• 嵌套类名：对于嵌套定义的类名（如 .parent .child），CSS Modules 会将其扁平化为一个独立的类名（例如 styles.child），因此可以直接使用。

---

4. TypeScript 类型支持

为了确保 TypeScript 能正确识别模块化的样式文件，需要在项目的 shims-vue.d.ts 文件中添加以下声明：

shims-vue.d.ts：

declare module '*.module.scss' {
  const classes: { [key: string]: string };
  export default classes;
}

---

5. 完整示例

以下是一个完整的示例，展示了如何在 Vue 3 的 TSX 写法中使用 .abc-cbd 这样的类名。

SCSS 文件 (styles.module.scss)：

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

.parent {
  color: blue;

  .child {
    font-size: 16px;
  }
}

TSX 文件 (MyComponent.tsx)：

// MyComponent.tsx
import { defineComponent } from 'vue';
import styles from './styles.module.scss';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    return () => (
      <div>
        {/* 使用单层类名 */}
        <div class={styles['abc-cbd']}>This is abc-cbd</div>

        {/* 使用嵌套类名 */}
        <div class={styles.parent}>
          Parent
          <div class={styles.child}>Child</div>
        </div>
      </div>
    );
  },
});

---

6. 注意事项

1. 类名命名规则：CSS Modules 会对类名进行哈希处理（例如 abc-cbd 可能会被编译为 abc-cbd-abc123），因此建议直接通过 styles['abc-cbd'] 或 styles.abc_cbd 来访问。
2. 动态绑定类名：如果需要动态绑定类名，可以结合逻辑条件或状态变量。例如：

   <div class={isActive ? styles['abc-cbd'] : ''}>Dynamic Class</div>
   

---

总结

在 Vue 3 的 TSX 写法中，.abc-cbd 这样的类名可以直接通过 styles['abc-cbd'] 或 styles.abc_cbd 来访问和使用。借助 CSS Modules 和 TypeScript 的类型支持，可以轻松管理样式类名并避免全局冲突。如果有其他问题，请随时告诉我！ 😊