Как работать с модификаторами классов при импортировании из .module.scss?

Question

[arbitino]

Появились трудности использования модификаторов для классов стилей при использовании scss модулей.
Есть компонент, ему через пропсы должен передаваться модификатор для className, но все классы загружаются из импорта модуля, соответственно в scss стили для модификатора не подходят по имени, как в таких ситуациях поступают?
Пример кода, что бы было понятнее:

Scss модуль:

.phone {
    display: flex;
    gap: 10px;

/*По хорошему модификатор должен подставлятся как .phone--test, но тут тоже возникли проблемы, думал так упростить*/
    &.test { 
        .phone__link {
            color: red !important;
        }
    }
}

Компонент:

import styles from './Phone.module.scss';

const Phone = () => {
    let mode = 'test'; //Должен поступать из пропсов, но для упрощения сделал пока так

    return (
        <div className={styles.phone + '  ' + mode}> //Конкатенация классов, естественно не работает
            <Link to={'tel:[phone]'} className={styles.phone__icon}>
                <img src={'/images/svg/phone.svg'} alt="Иконка телефона"/>
            </Link>
            <Link to={'tel:[phone]'} className={styles.phone__link}>[phone]</Link>
        </div>
    );
};

export default Phone;

Comments

[Anonymous]

модификаторы должны быть такими например: block__element_red

[arbitino]

Никита Савченко, В данной ситуации это не важно, проблема не в этом. Но, кстати, допустимо и запись через --, что я и указал в комментарии в коде

[wakenbyWork]

Никита Савченко, Нет не должны быть они такими, а могут. Модификатор через -- на много приятнее глазу. Документацию читать нужно)

[Anonymous]

wakenbyWork, тогда я ошибся. Мне больше нравится __ и _

[Сергей delphinpro]

.phone {
    display: flex;
    gap: 10px;

    &.test &__link {
        color: red !important;
    }
}

Answer 1

[wakenbyWork]

.phone {
  $self: &;
  
  display: flex;
  gap: 10px;

  &--test {
    #{$self}__link {
      color: red !important;
    }
  }
}

import styles from './Phone.module.scss'
import classNames from 'classnames'

const Phone = () => {
    const mode = 'test'
    
    const clazz = classNames({
        [styles['phone']]: true,
        [styles['phone--test']]: mode === 'test'
    })

    return (
        <div className={clazz}>
            <Link to={'tel:[phone]'} className={styles.phone__icon}>
                <img src={'/images/svg/phone.svg'} alt="Иконка телефона" />
            </Link>

            <Link to={'tel:[phone]'} className={styles.phone__link}>[phone]</Link>
        </div>
    )
}

export default Phone

Надеюсь все понятно :)

P.S: Думаю так будет лучше:

const Phone = () => {
    const mode = 'test'

    const clazz = classNames({
        [styles['phone']]: true,
        [styles['phone--test']]: mode === 'test'
    })

    return (
        <Link to={'tel:[phone]'} className={clazz}>
            <img className={styles.phone__icon} src={'/images/svg/phone.svg'} alt="Иконка телефона" />

            <div className={styles.phone__link}>[phone]</div>
        </Link>
    )
}

Comments

[arbitino]

Благодарю!