基于 SCSS/CSS 的 React 隐藏元素答案

【问题标题】：Hiding Element in React Based on SCSS/CSS基于 SCSS/CSS 的 React 隐藏元素
【发布时间】：2021-07-23 13:09:31
【问题描述】：

我有一个只需要在特定页面上隐藏的全局元素。我遇到的问题是，当我尝试在导入css的基础上隐藏特定页面上的元素时，它也会隐藏在所有页面上。它只需要在这个页面上隐藏。 <Main /> 页面是我的主页所在的位置，例如 /products

<body>
  <Main />
  <div style={{ height: 800, position: "absolute" }} className="products">
    Hide this on none /products page
  </div>
</body>

products.scss

body {
  .products {
    display: none;
  }
}

产品

import { useRouter } from 'next/router'

const Products = () => {
  const router = useRouter()

  if (router.pathname === '/products') {
    require('../styles/products.scss')
  }
}

【问题讨论】：

标签： css reactjs sass next.js

【解决方案1】：

<div style={{ height: 800, position: "absolute" }} className={router.pathname === '/products' ? 'hidden' : ''}>
    Hide this on none /products page
  </div>

现在为hidden 类设置display: none;。 :)

【讨论】：