Блог

Я хочу изменить цвет фона и текста выбранного компонента.

Я использовал стилизованный компонент и создал IsSelected, но не знаю, как использовать isSelected для изменения цвета фона и текста.

Как переключить его значение?

У меня есть такой компонент, как:

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

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

`;

const SomeText = styled.span`
  color: #000000

    ${({ isSelected }) =>
        isSelected amp;amp;
        `
        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>
 )
};
  

В остальном стилизованные компоненты в порядке, но просто SomeText отсутствует точка с запятой:

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

Поскольку стиль, применяемый при isSelected значении true, не использует никаких переменных, вы также можете изменить обратные ссылки на обычные кавычки:

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

То же самое относится к Container .

Чтобы переключать стили, вам просто нужно передать isSelected в качестве реквизита SomeText и Container , например

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

То, как вы вычисляете значение для isSelected , зависит от вас.