无法在 React 中正确使用 SASS/SCSS 样式

Question

获取这个 SCSS 样式表：

@import "../vars";

img.userIcon {
  &.regular {
    max-width: 64px;
    max-height: 64px;
  }
  &.small {
    max-width: 32px;
    max-height: 32px;
  }
  border-radius: 50%;
  border: 2px solid $bg-light;
}

究竟如何让我的页面识别.regular 或.small？

这是我的UserIcon.tsx，应用了这种样式：

import styles from "../styles/components/UserIcon.module.scss";

type Props = {
    src: string,
    variant?: "regular" | "small"
}
export default function UserIcon({ src, variant = "regular" }: Props) {
    return <img className={`${styles.userIcon} ${variant} mb-2`} src={src} />
}

现在，这显然行不通，因为在某些地方，类名都混杂在一起，看起来像这样：

<img class="UserIcon_userIcon__1jFAP regular mb-2">

这很奇怪，因为它不会对我导入的 boostrap scss 文件执行此操作。

所以我需要知道：

• 如何删除类名重命名。
• 如何正确实现.regular 和.small，使其使用混乱的名称。

Answer 1

将 variant 作为关键参数传递给您的样式对象：

return <img className={`${styles.userIcon} ${styles[variant]} mb-2`} src={src} />

Answer 2

你能试试这样的吗？

@import "../vars";

img.userIcon {
  border-radius: 50%;
  border: 2px solid $bg-light;
}
img.regular {
    max-width: 64px;
    max-height: 64px;
  }
img.small {
    max-width: 32px;
    max-height: 32px;
  }

import styles from "../styles/components/UserIcon.module.scss";

type Props = {
    src: string,
    variant?: "regular" | "small"
}
export default function UserIcon({ src, variant = "regular" }: Props) {
    return <img className={`${styles.userIcon} ${styles[variant]} mb-2`} src={src} />
}

告诉我它是否解决了你的问题