CODEWITHSUNDEEP
htmlcssreactjs
GoldenRetriever
GoldenRetriever

Reputation: 195

CSS in React makes all buttons disappear?

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 1) which I actually want to stay visible, to disappear because NavBar.css has a media query in it. The NavBar.css is only for the NavBar.js, why it is causing the every button to disappear?

Picture of when window is large: When window size is large Picture of when window is small. The 'Search' button disappears which is not the intension. when window is small

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

Upvotes: 0

Views: 396

Answers (2)

Zahra Mirzaei
Zahra Mirzaei

Reputation: 759

When you style your components in React, actually it applies to every component you have. so you should use specificclass or id for that special element, or use CSS module or styled component for styling.

I prefer css module. In this solution, you change Button.css to Button.module.css and import that to Button.js.

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

In this way, you have a special style only for Button.js.

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 203373

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

NavBar_.css

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

NavBar_.js

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

Button.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>
  )
};

Upvotes: 1

Related Questions