Изменить стили компонента при наведении родного брата

Question

У меня есть простой случай, когда я хочу, чтобы box2 изменил фон на желтый, если box1 был наведен.

пример кода:

const Box = styled.div`
  height: 200px;
  width: 200px;
  background: blue;
`;

const Box2 = styled.div`
  height: 200px;
  width: 200px;
  background: green;
  margin-top: 20px;

  ${Box}:hover {
    background: yellow;
  }
`;

in render:
  <Box>Box 1</Box>
  <Box2>Box 2</Box2>

Ссылка на предварительный просмотр кода:

https://stackblitz.com/edit/react-rvhgov

Спасибо!

Редактировать Это приведенное выше не работает, не знаю почему, оно должно работать

Answer 1

Зависит от ваших элементов рендеринга, вы можете делать это разными способами, но, как и у нас, вы можете использовать соседний братский комбинатор (+) или общий братский комбинатор (~) , Поэтому все, что вам нужно сделать, это заменить

${Box}:hover {
  background: yellow;
}

на

${Box}:hover ~ & ${Box2}{
  background: yellow
}

ОБНОВЛЕНИЕ

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

Answer 2

Вы можете попробовать это:

import React, { Component, useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

import styled, {css} from 'styled-components';

const Box = styled.div`
  height: 200px;
  width: 200px;
  background: blue;
`;

const Box2 = styled.div`
  height: 200px;
  width: 200px;
  background: green;
  margin-top: 20px;
  ${props => props.hovered && css`
    background: yellow;
  `} 
`;

export default function App() {
  const [hovered, setHovered] = useState(false);

  return (
    <div className="App">
      {'' + hovered}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Box onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>Box 1</Box>
      <Box2 hovered={hovered}>Box 2</Box2>
    </div>
  );
}

render(<App />, document.getElementById('root'));

При таком подходе не имеет значения, являются ли элементы / компоненты родными или нет. Это будет работать как для братьев, сестер, так и для компонентов, вложенных в разные поддеревья.