vue3 tsx 驼峰样式或者中划线样式如何组件中引用

在 Vue 3 中使用 TSX 和 .module.scss 文件时，引用样式类名主要有两种常见方式：驼峰命名法和直接通过方括号引用原始类名。这两种方法都能有效地处理包含特殊字符（如连字符 -）的类名。

驼峰命名法

当你的 CSS 模块文件中的类名包含连字符或其他特殊字符时，Vue 的构建工具通常会自动将这些类名转换为驼峰命名法。例如，.abc-cbd 可能会被转换为 abcCbd。

示例：

假设你有一个 .module.scss 文件如下：

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

你可以这样导入并在 TSX 组件中使用它：

import styles from './path/to/styles.module.scss';

const MyComponent: FunctionalComponent = () => (
  <div className={styles.abcCbd}>
    This is a test.
  </div>
);

注意，这里我们使用了 abcCbd 而不是原样写成 .abc-cbd。这是因为构建工具已经将类名转换为了驼峰命名形式。

直接通过方括号引用原始类名

如果你不想依赖或不确定自动转换的结果，可以直接通过方括号语法来引用原始类名。这种方式允许你直接使用带有连字符或其他特殊字符的类名。

示例：

同样的 .module.scss 文件内容：

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

你可以这样引用：

import styles from './path/to/styles.module.scss';

const MyComponent: FunctionalComponent = () => (
  <div className={styles['abc-cbd']}>
    This is a test.
  </div>
);

这种方法更加直接，适用于那些不想记住或处理自动转换规则的情况。

如何选择？

• 使用驼峰命名法：当你希望保持代码风格的一致性，并且愿意遵循默认的转换规则时，推荐使用驼峰命名法。

• 使用方括号语法：当你需要直接引用包含特殊字符的类名，或者不确定自动转换后的名称时，使用方括号语法是一个更灵活的选择。

注意事项

1. 确保正确性：无论采用哪种方式，请确保类名拼写正确。错误的类名会导致样式无法应用。

2. 调试与验证：如果不确定转换后的类名是什么样子，可以通过打印 styles 对象来查看所有可用的类名：

   console.log(styles);
   

3. CSS 模块配置：确保你的项目配置支持 CSS 模块。大多数现代构建工具（如 Webpack、Vite）默认支持 CSS 模块，但具体配置可能有所不同。

通过以上方法，你可以在 Vue 3 和 TSX 环境中灵活地引用 .module.scss 文件中的类名，无论是通过驼峰命名还是直接引用原始类名的方式。这使得你的组件样式管理更加清晰和模块化。