在同级时更改组件的样式

Posted 2021-04-27

我有一个简单的例子，如果box1悬停了，我希望box2将背景更改为黄色。

代码示例：

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

谢谢！

Edit上面的这似乎不起作用，不知道为什么，它应该起作用？

答案

取决于渲染项目，您可以使用不同的方法来实现，但是正如我们在此处所获得的，可以使用adjacent sibling combinator（+）或general sibling combinator（〜）。因此，您要做的就是替换这个

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

with

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

另一答案

您可以尝试以下方法：

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'));

使用这种方法，元素/组件的同级与否无关紧要。它适用于同级，也适用于组件嵌套在不同子树中的情况。