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

Question

我有这个问题：我正在制作响应大小的标题，所以当宽度小于 1199 像素时，用户可以看到汉堡菜单。要打开/关闭菜单，我正在使用 React Hooks，它会更改显示：块/无。但它只有在屏幕小于 1199px 时才有效，但在我的情况下它每次都有效，显然我的标题有 display: 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

不要使用内联样式。使用 JavaScript 更改类名。

根据类名和媒体查询在样式表中设置display。

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