如何在 React 中使用媒体查询？

Question

我有这个问题：我正在制作 header 具有响应大小，因此当宽度小于 1199px 时，用户可以看到汉堡菜单。对于 open/close 菜单，我正在使用 React Hooks，它会更改显示：block / none。但只有当屏幕小于 1199px 时它才能工作，但在我的情况下它每次都工作，显然我的 header 显示：none 并且页面上没有任何内容（只有我的徽标）

组件代码：

const Header = () => {
    const [navBar, showNavBar] = useState(false)

    const useNavBar = () => {
        showNavBar(!navBar)
    }

    return (
        <header class="header-area main-header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="logo-area">
                            <a href='#'><img src={logo} alt="logo"/></a>
                        </div>
                    </div>
                    <div class="col-lg-10">
                        <div onClick={useNavBar} class="custom-navbar">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>  
                        <div class="main-menu">
                            <ul style={navBar === true ? {display: 'block'} : {display: 'none'}}> // problem is here
                                <li class="active"><a href="index.html">home</a></li>
                                <li><a href="#">about us</a></li>
                                <li><a href="#">schedule</a></li>
                                <li><a href="#">trainers</a></li>
                                <li><a href="#">blog</a>
                                    <ul class="sub-menu">
                                        <li><a href="#">Blog Home</a></li>
                                        <li><a href="#">Blog Details</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">contact</a></li>
                                <li><a href="#">pages</a>
                                    <ul class="sub-menu">
                                        <li><a href="s#">Service</a></li>
                                        <li><a href="#">Elements</a></li>
                                    </ul>
                                </li>
                                <li class="menu-btn">
                                    <a href="#" class="template-btn">book now</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </header>
     );
}

SASS代码：

.main-menu 
    ul 
        float: right
        @include desktop() 
            display: none
            float: left
            position: absolute
            top: 60px
            right: 0
            z-index: 4
            background: $dark
            width: 40%
            padding: 20px 20px 30px

PS：我不想添加我所有的 CSS 代码，因为它超过 200 个字符串，请解释一下如何在我的案例中使用媒体查询更改显示

Answer 1

不要使用内联样式。将 class 名称 更改为 JavaScript.

根据 class 名称和媒体查询在您的样式表中设置 display。

<ul className={navBar === true ? "foo" : "bar"}>

如何在 React 中使用媒体查询？

How to use Media Queries in React?

javascript

css

sass

media-queries

reactjs