如何在 Styled Components 中根据状态设置组件样式？

Question

我正在尝试根据 React 中的 Styled Components 中的 useState 挂钩更改输入背景。

这是我的代码：

 const [searchActive, setSearchActive] = useState(true);
 <div className="search" searchActive={searchActive}>
     <input id="input"/> 
 </div>

这是我的样式化组件代码：

.search {
    background: ${(searchActive) => (searchActive ? "red" : "yellow")};
   }

如有任何建议，我们将不胜感激。

Answer 1

像这样在样式组件中添加'props'；

.search {
  background: ${props => props.searchActive? "red" : "yellow"};
}

Answer 2

您可以在jsx中声明并直接使用Styled Components。它们不需要用作类名。也许这个方法对你有用。

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [searchActive, setSearchActive] = useState(true);
  const [value, setValue] = useState("");
  const Search = styled.input`
     background: ${(props) => (props.searchActive ? "red" : "yellow")};
  `;
  return (
    <Search
      searchActive={searchActive}
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
        setSearchActive(false);
      }}
    />
  );
}

Answer 3

创建组件并传入 props 将起作用：

import React from 'react'
import styled from 'styled-components'

const Search = styled.div`
  background: ${props => (props.searchActive ? 'red' : `yellow`)};
`

const Parent = () => {
  return (
      <Search searchActive={searchActive}>
        <input id="input" /> 
      </Search>
  )
}

export default Parent

唯一不同的是，您对 search 的任何风格都可以添加到 Search 组件中，但您没有显示任何进一步的代码，所以我不知道您是如何引入它的.

您还可以使用以下方式将组件外部化：

import styled from 'styled-components'

export const Search = styled.div`
  background: ${props => (props.searchActive ? 'red' : `yellow`)};
`

然后把它带进来：

import {Search} from './search.js'

如何在 Styled Components 中根据状态设置组件样式？

How to style a component based on state in Styled Components?

reactjs

styled-components

use-state