Точки останова Mixin s css работают неправильно в модуле реагирования s css - PullRequest
Новая
       36

Точки останова Mixin s css работают неправильно в модуле реагирования s css

0 голосов
/ 12 января 2020

Я пытаюсь установить некоторые медиа-точки прерывания с помощью медиа-запросов @mixin в модулях React s css, и по какой-то причине изображение, которое я пытаюсь отображать только с разрешением 1200 пикселей, сохраняет свойство display: none. Мой s css: 

@mixin for-phone-only {
    @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
    @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
    @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
    @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
    @media (min-width: 1800px) { @content; }
}
.HeroLogo {
    @include for-phone-only{
        display: none;
    }
    @include for-tablet-landscape-up{
        display: none;
    }
    @include for-desktop-up{
        height: 70%;
    }
}

и мой компонент React: 

import React from 'react'
import styles from './Hero.module.scss'


const Hero = (props) => {
    return (
    <div className={styles.Hero}>
        <div>
            <p className={styles.HeroText}>{props.children}</p>
        </div>
        <div className={styles.HeroLogoContainer}>
            <img src={props.logo} alt={props.alt} className={styles.HeroLogo}/>
        </div>
    </div>
    )
}

export default Hero

По какой-то причине код работает, только если я не включил for-table-landscape- до смешивания, так как телефон использует максимальную ширину вместо мин. Есть идеи, почему рабочий стол не переопределяется на 1200px?

...