CODEWITHSUNDEEP
reactjscomponentsreact-functional-component
Gabriele Sabatino
Gabriele Sabatino

Reputation: 146

change color to a functional component

I need to change color to black of the h1 text of the header component, but not for the home, only for others pages, I tried to inline style but didn't work, there is any solution?

    <Router>

      <div className="app">

        <Switch>

          <Route path='/portraits'>
            <Header />
            <Portraits />
            <Footer />
          </Route>

          <Route path='/contact'>
            <Header />
            <Contact />
            <Footer />
          </Route>

          <Route path='/'>
            <Header />
            <Home />
          </Route>

        </Switch>

      </div>

    </Router>

Header component, I used bootstrap for the dropdown menu

<nav>
            <Link to='/' className="title">
                <h1>Ioana Savin</h1>
            </Link>

            <div className="head">

            <DropdownButton title="Portfolio" className='button'>
                
                      
                    <Dropdown.Item href='/fashion'>Fashion</Dropdown.Item>
                
                    <Dropdown.Item href='/portraits'>Portraits</Dropdown.Item>
                
                    <Dropdown.Item href='/bnw'>BnW</Dropdown.Item>
                
                    <Dropdown.Item href='/analogue'>Analogue</Dropdown.Item>
                
                    <Dropdown.Item href='/clienti'>Clienti</Dropdown.Item>
                

            </DropdownButton>
            
            <Link to='/portfolio' className="link">   
            <DropdownButton title="Contact" className='button' />     
            </Link>
            
            </div>
        </nav>

Upvotes: 0

Views: 512

Answers (2)

the_previ
the_previ

Reputation: 682

I see the <Router> so I think you're using react-router. You can check the route where you're in using, in your Header component:

import { useLocation } from 'react-router-dom';

const Header = () => {
  const location = useLocation();

  return (
    <>
     <h1 style={location.pathname !== 'home' ? {color: "black"} : {}}>Title</h1>
     [... other components]
    </>
  )
}

(Obviously replace 'home' with the path name of your homepage)

Upvotes: 1

Viet
Viet

Reputation: 12787

You can use a props to control this:

<Route path='/'>
  <Header isHomeScreen />
  <Home />
</Route>

<h1 style={!isHomeScreen ? {color: "black"} : {}}>Ioana Savin</h1>

Upvotes: 1

Related Questions