Не удается создать стиль с помощью SASS / SCSS в React должным образом

#javascript #css #reactjs #typescript #sass

Вопрос:

Возьмите эту таблицу стилей SCSS:

 @import "../vars";

img.userIcon {
  amp;.regular {
    max-width: 64px;
    max-height: 64px;
  }
  amp;.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 правильно, чтобы он использовал перепутанное имя.

1. Это называется «CSS-модули», и они очень, очень хороши. Хотите верьте, хотите нет, но вам нужны эти «перепутанные» имена классов. Имена классов становятся глобально уникальными строками, что позволяет вам иметь одинаковые имена классов в разных файлах, которые не конфликтуют друг с другом. Недостатком является необходимость перевода всех имен классов через импортированный css-объект. Но оно того стоит.

Ответ №1:

передайте variant в качестве ключевого аргумента вашему объекту styles:

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

1. Это работает! Но есть ли какой-нибудь способ отключить переименование?

2. Я считаю, что одной из причин использования модуля CSS является создание уникальных имен классов, чтобы избежать столкновения имен. medium.com/@pioul/modular-css-with-react-61638ae9ea3e .

Ответ №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} />
}

Скажите мне, решило ли это вашу проблему

1. Не решает мою проблему, потому что теперь он вообще не будет применять какой-либо стиль, даже радиус границы, как будто он вообще не может найти класс.

2. хм, это очень странно

3. Можете ли вы попробовать просто <img className="userIcon" src={src} /> plaese

4. Да, я это сделал. Что-то меняет имена моих классов. Вот как они выглядят при запуске страницы: i.imgur.com/S8MsEz4.png

5. Теперь мне нужно, что вы используете для настройки scss / sass