时间戳

首页 > 解决方案 > 将颜色更改为功能组件

reactjs - 将颜色更改为功能组件

问题描述

我需要将标题组件的h1文本的颜色更改为黑色，但不是为主页，仅适用于其他页面，我尝试内联样式但没有奏效，有什么解决办法吗？

    <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>

标题组件，我使用引导程序作为下拉菜单

<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>

标签： reactjscomponentsreact-functional-component

解决方案

我看到了，<Router>所以我认为您正在使用react-router. 您可以在 Header 组件中检查您正在使用的路线：

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

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

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

（显然用你主页的路径名替换'home'）

推荐阅读