React 中的 CSS 让所有按钮消失？

Question

我在 NavBar 中的按钮的 css 应用于每个按钮，但它不应该这样做。这会导致我实际上想要保持可见的名为“搜索”的按钮（参见图片1）消失，因为 NavBar.css 中有一个媒体查询。 NavBar.css 仅适用于 NavBar.js，为什么会导致每个按钮都消失？

窗口大时的图片： 窗口小的时候的图片。 “搜索”按钮消失了，这不是本意。

//App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import Home from './Home';
import NavBar_ from './NavBar_';

function App() {
  return (
    <>
      <Router>
        <NavBar_ />
        <Routes>
          <Route path='/' exact element={<Home />} />
        </Routes>
      </Router>
    </>
  );
}
export default App;

---

//NavBar_.js
import React from 'react'
import Button from './Button'
import './NavBar_.css'

const NavBar_ = () => {
    return (
        <div>
            <Button />
        </div>
    )
}
export default NavBar_

---

//Home.js
import React from 'react'
import SearchBar from './SearchBar'

const Home = () => {
    return (
        <div className='main-hero'>
            <div className='hero-bar'>
                <SearchBar />
            </div>


        </div>
    )
}

export default Home

---

//SearchBar.js
import React from 'react'

const SearchBar = () => {
    return (
        <>
            <form>
                <input
                    className='search-bar'
                    id='search-location'
                    type='text'
                    placeholder='Town'
                />
                <button className='submit-search' type='submit'>
                    Search
                </button>

            </form>

        </>
    )
}

export default SearchBar

---

//Button.js
import React from 'react'
import './Button.css'
import { Link } from 'react-router-dom'

const Button = () => {
    return (
        <Link to="/sign-up">
            <button>Sign Up</button>
        </Link>
    )
};

export default Button;

---

//NavBar_.css
@media screen and (max-width: 960px) {
    button {
        display: none;
    }
}

Answer 1

CSS 规则对于它们运行的​​页面是全局的。这意味着您包含在 NavBar 中的 CSS 仍将在范围内并在全球范围内应用。 NavBar.css 无条件地将display: none 规则应用于所有按钮。

@media screen and (max-width: 960px) {
  button {
    display: none;
  }
}

使用class 或id 来限制规则的范围。例如，仅具有 "signup" 类属性的 button 元素。

Class Selectors

NavBar_.css

@media screen and (max-width: 960px) {
  button.navbar {
    display: none;
  }
}

NavBar_.js

const NavBar_ = () => {
  return (
    <div>
      <Button className="navbar" />
    </div>
  )
}

按钮.css

button.signup {
  ... signup button rules ...
}

Button.js

import React from 'react'
import './Button.css'
import { Link } from 'react-router-dom'

const Button = () => {
  return (
    <Link to="/sign-up">
      <button className="signup">Sign Up</button>
    </Link>
  )
};

Answer 2

当您在 React 中为组件设置样式时，实际上它适用于您拥有的每个组件。所以你应该使用 specificclass 或 id 作为那个特殊元素，或者使用 CSS module 或 styled component 作为样式。

我更喜欢css module。在此解决方案中，您将 Button.css 更改为 Button.module.css 并将其导入到 Button.js。

import classes from './Button.module.css'

这样，你就有了只为Button.js的特殊风格。

Answer 3

你可以试试这两种方法。一种是通过添加符号> 来添加NavBar 内部元素。像这样：

//NavBar_.css
@media screen and (max-width: 960px) {
  >  button {
        display: none;
    }
}

或将类名添加到导航栏并使用它