将 CSS 转换为样式化组件问题答案

【问题标题】：Converting CSS to styled component issue将 CSS 转换为样式化组件问题
【发布时间】：2021-09-12 07:59:11
【问题描述】：

我是样式化组件的新手。在我的 React 代码中，我有一些条件渲染来更改一些 CSS，具体取决于我是否使用以下代码滚动导航栏：

const [colorChange, setColorchange] = useState(false)
const changeNavbarColor = () => {
    if (window.scrollY >= 80) {
      setColorchange(true)
    } else {
      setColorchange(false)
    }
  }
  window.addEventListener("scroll", changeNavbarColor)

    <nav className={colorChange ? "navbar colorChange" : "navbar"}>content</nav>

我的问题是为此编写样式组件。

我的普通 CSS 看起来像这样：

.navbar {
  /*styles...*/
}

.navbar.colorChange {
/*styles...*/
}

我首先用一些样式创建了以下内容：

const Navbar = styled.nav`
 /*styles...*/
`

但是我如何共享导航栏和颜色变化共同的样式；我尝试将以下内容附加到 NavBar 样式的组件中：

const Navbar = styled.nav`
 /*styles...*/  
 .colorChange{
  /*styles...*/
 }
`

然后在 React 中渲染组件时，如何转换这一行以使用样式化组件？

<nav className={colorChange ? "navbar colorChange" : "navbar"}>content</nav>

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

只需将 prop 作为动态值传递

const Navbar = styled.nav`
    // navbar common css
    color: ${({ color}) => color};
`

<Navbar color={colorChange ? 'red':'transparent'} />

正如你评论的那样，你有多种风格我建议下面的方法只是传递 isColorChange 的道具

const Navbar = styled.nav`
  font-size: 13px; //common style
  background: ${props => (props.isColorChange ? "#6495ED" : "#2b2b2b")};
  background-color: ${props => (props.isColorChange ? "#6495ED" : "#2b2b2b")};
  margin-top: ${props => (props.isColorChange ? "10px" : "20px")};
  padding-top: ${props => (props.isColorChange ? "5px" : "10px")};
  padding-bottom: ${props => (props.isColorChange ? "5px" : "10px")};
`;

<Navbar isColorChange={true / false}></Navbar>;

【讨论】：

我的解释可能不够清楚。但是 .navbar 和 .colorChange 有很多样式共享，不仅是颜色，比如 background-color、margin-top、padding-top 和 padding-bottom。这些都是在滚动时实现的。否则，将应用 .navbar 的默认样式。
所以我为 NavBar 和 ColorChange 常见的样式创建了名为 sharedStyle 的 CSS 字符串，然后用 ${sharedStyle} 在两者中实现。因此有两个不同样式的组件，称为 NavBar 和 ColorChange。但是我现在如何在我的 react 组件中实现它们呢？因此，ColorChange 是在滚动上实现的，否则 NavBar
我确实根据上面的 cmets 尝试了以下操作：<NavBar = {ColorChange ? "NavBar ColorChange" : "NavBar"}></NavBar> 但这是不正确的

【解决方案2】：

您需要将 colorChange 状态传递给 NavBar 组件。

这是导航栏声明

const NavBar = styled.nav`
  //styled for nav bar
  color: ${props => props.color}
`

并在组件中使用

<NavBar color={colorChange ? '#fff':'#ddd'}>{children}</NavBar>

【讨论】：