使用 styled-components 在悬停时隐藏导入的子组件答案

【问题标题】：hide imported child component on hover using styled-components使用 styled-components 在悬停时隐藏导入的子组件
【发布时间】：2020-06-29 04:18:04
【问题描述】：

正如标题所说，这适用于位于同一个 js 文件中的样式化组件（前提是它们在上面按程序排序）。但是对于导入的子组件，我无法让它工作。

import React from "react";
import styled from "styled-components";

// Components
import Bars from "../path/Bars.js";
import BarsHover from "../path/BarsHover.js";

// Variables
import { colors } from "../../path/index.js";

//============================================ styles =============================================
const DivBars = styled(Bars)``;
const DivBarsHover = styled(BarsHover)``;
const DivWrapper = styled.div`
  display: flex;
  width: 20rem;
  margin-bottom: 3rem;

  &:hover {
    cursor: pointer;
  }

  &:hover ${DivBars} {
    display: none;
  }

  &:hover ${DivBarsHover} {
    display: block;
  }
`;
//=========================================== component ===========================================
const ParentComponent = props => {
  return (
    <DivContainer>
      <DivBars fullBarWidth={"100%"} fractionBarWidth={"70%"} barColor={colors.niagara} />
      <DivBarsHover fullBarWidth={"100%"} fractionBarWidth={"70%"} barColor={colors.gallery2} />
    </DivContainer>
  );
};

导出默认父组件；

【问题讨论】：

你是说Bars和BarsHover是导入的不能隐藏，而DivBars和DivBarsHover可以？你的问题（如果有的话）对我来说有点不清楚。
（为了更清楚而编辑了问题）：不，我不能让他们中的任何一个人隐藏。我试过&:hover ${Bars} {display:none} 和&:hover ${DivBars} {display:none}

标签： reactjs styled-components

【解决方案1】：

我认为这 caveat 是原因：

...在 styled() 工厂中包装 A 使其符合条件插值——只要确保被包裹的组件通过类名。
class A extends React.Component {
  render() {
    return <div className={this.props.className} />
  }
}

const StyledA = styled(A)``

const B = styled.div`
  ${StyledA} {
  }
`

注意：确保 className 属性传播一直到被引用的组件，以防它不是直接后代。

【讨论】：

出于某种奇怪的原因，它仍然对我不起作用（唯一的区别是我使用的是import x from... 和not import { x } from...。然而，我能够在将这些组件包装后让它工作一个单独的子 div，然后调用该子 div 隐藏在父 div 上。
啊对我来说不同的是因为我之间还有一个嵌套的父级，这就是为什么我的代码看不到它（不认为这会有所作为）。无论如何做得好，这回答了这个问题。我确实建议编辑答案代码以匹配沙箱中的代码（因为沙箱代码将来可能会消失）。
解决方案中的代码是来自styled-components 文档的副本，除非我需要在此处更新答案，否则我不会在 SO 上回答后更改沙箱。很高兴它对你有用！