@arbitino

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

Появились трудности использования модификаторов для классов стилей при использовании 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:88005553555'} className={styles.phone__icon}>
                <img src={'/images/svg/phone.svg'} alt="Иконка телефона"/>
            </Link>
            <Link to={'tel:88005553555'} className={styles.phone__link}>+7 (495) 648 90 55</Link>
        </div>
    );
};

export default Phone;
  • Вопрос задан
  • 80 просмотров
Решения вопроса 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:88005553555'} className={styles.phone__icon}>
                <img src={'/images/svg/phone.svg'} alt="Иконка телефона" />
            </Link>

            <Link to={'tel:88005553555'} className={styles.phone__link}>+7 (495) 648 90 55</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:88005553555'} className={clazz}>
            <img className={styles.phone__icon} src={'/images/svg/phone.svg'} alt="Иконка телефона" />

            <div className={styles.phone__link}>+7 (495) 648 90 55</div>
        </Link>
    )
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы