根据您在应用程序中的使用位置，您如何对React.js组件进行不同的风格设置

Question

假设您有一个导航栏，当您在主页上使用此组件时，您希望它具有特定的背景色和显示属性，但当您在应用程序的另一个页面上使用相同的导航栏组件时，需要更改这些CSS属性。鉴于组件有一个链接的CSS文件，您将如何根据渲染位置更改组件的样式？

Answer 1

我个人目前最喜欢的方法是样式组件。您的组件可能看起来像这样：

// NavBar.js
import styled from 'styled-components'
const StyledDiv = styled.div`
width: 100%;
height: 2rem;
background-color: ${props => props.bgColor};
`
const NavBar = (bgColor) => {
return <StyledDiv bgColor={bgColor}>
}

然后，要在不同的环境中使用它，只需传递颜色道具：

// homepage.js
<NavBar bgColor="red" />
// otherpage.js
<NavBar bgColor="#123ABC" />

样式化组件正在成为一种非常流行的做事方式，但要注意，有很多方法可以做到这一点。

https://styled-components.com/

(未测试代码(

Answer 2

如果你只想使用纯CSS，那么你可以在route的基础上更改className，这样样式也会改变。

示例：

import { useLocation } from "react-router-dom";
const Navigation = () => {
let location = useLocation();
...
return(
<nav className={location.pathname === "/home" ? "homepage-navbar" : "default-navbar"}>
...
</nav>
)
}

您也可以为多页编写更长的条件。

您可以做的另一件更好的事情是将location.pathname和className的值作为道具传递。

import { useLocation } from "react-router-dom";
const Home = () => {
let location = useLocation();
...
return (
<>...
<Navigation location={location.pathname} styleClass={"homepage-navbar"}/>
</>
)
}

const Navigation = ({location, styleClass}) => {
...
return(
<nav className={location === "/home" ? styleClass : "default-navbar"}>
...
</nav>
)
}

因此，现在您可以从不同的组件为className传递不同的值，并为导航栏获得不同的样式。