Question

我要更改所选组件的背景和文本颜色。

我使用样式化的组件并创建了isSelected，但不知道如何使用isSelected来更改背景和文本颜色。

如何切换其值？

我的组件类似：

const Container = styled.div`
  width: auto;
  cursor: pointer;
  :hover {
    background-color: #ccc;
    border-radius: 5px;
  }

  ${({ isSelected }) =>
    isSelected &&
    `
    background-color: #b4b4b4`}

`;

const SomeText = styled.span`
  color: #000000

    ${({ isSelected }) =>
        isSelected &&
        `
        color: #ffffff`}
`;

const MessageRoom = ({ item, onClick }) => {
 return (
  <Container onClick={onClick}>
   <SomeText>{item.text}</SomeText>
  </Container>
 )
};

上面的组件是列表项，下面的是父组件，例如：

return (
    <div>
        {list.map(item => {
          return <MessageRoom item={item} key={item.id} onClick={onItemClick}/>;
        })}
    </div>
  );

任何帮助将不胜感激。

编辑：

const MessageRoom = ({ item, onClick }) => {
 const [isSelected, setIsSelected] = useState(false);

 return (
  <Container isSelected={isSelected} onClick={onClick}>
   <SomeText isSelected={isSelected}>{item.text}</SomeText>
  </Container>
 )
};

Answer 1

样式化的组件在其他方面还不错，但是SomeText仅缺少分号：

const SomeText = styled.span`
  color: #000000;
  /*            ^^ */
  ${({ isSelected }) => isSelected && `color: #ffffff`}
`;

由于isSelected为true时应用的样式不使用任何变量，因此您也可以将反引号更改为普通引号：

const SomeText = styled.span`
  color: #000000;
  /*            ^^ */
  ${({ isSelected }) => isSelected && "color: #ffffff"}
`;

Container也是如此。

要切换样式，您只需将isSelected作为道具传递给SomeText和Container，例如

const MessageRoom = ({ item, onClick }) => {
  return (
    <Container isSelected={true} onClick={onClick}>
      <SomeText isSelected={true}>{item.text}</SomeText>
    </Container>
  );
};

您如何计算isSelected的值。

更改所选项目的样式化组件的样式

1 个答案: