CSS in React makes all buttons disappear?-CodePudding

The css for my button in NavBar is applied to every button, which it shouldn't. This results in the button called 'Search' (see picture Picture of when window is small. The 'Search' button disappears which is not the intension.

//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;
    }
}

CodePudding user response：

CSS rules are global to the page they run on. This means the CSS you include with your NavBar will still be in scope and applied globally. The NavBar.css unconditionally applies the display: none rule to all buttons.

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

Use a class or id to restrict the scope of the rule. Example, only button elements with the "signup" class attribute.

Class Selectors

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

NavBar_.js

import './NavBar_.css'

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

CodePudding user response：

You can try these two ways. One is to add NavBar internal elements by adding the sign >. like this :

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

or add class name to navbar and use this