Question

我正在尝试在React scss模块中使用@mixin媒体查询来设置一些媒体断点，并且由于某种原因，我试图仅以1200px最小出现的图像保持了display：none属性。我的scss：

@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-up mixin时才有效，因为电话使用的是最大宽度而不是最小宽度。知道为什么桌面不能以1200px覆盖吗？

Mixin Scss断点在React Ssss模块中无法正常工作

0 个答案: