Reactjs 使用样式化组件在悬停时隐藏导入的子组件

正如标题所说，这适用于位于同一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>
  );
};

从“React”导入React；
从“样式化组件”导入样式化；
//组成部分
从“./path/bar.js”导入条形图；
从“./path/barspoor.js”导入Barspoor；
//变数
从“./../path/index.js”导入{colors}；
//==================================================================款式=============================================
const divbar=样式化（条）`；
const divbarsphover=styled（barsphover）`；
const DivWrapper=styled.div`
显示器：flex；
宽度：20雷姆；
边缘底部：3rem；
&：悬停{
光标：指针；
}
&：hover${divbar}{
显示：无；
}
&：hover${divbarsphover}{
显示：块；
}
`;
//=========================================================组件===========================================
const ParentComponent=props=>{
返回(
);
};

导出默认父组件

我认为这就是原因：

…在styled（）工厂中包装

A

，使其符合 插值——只需确保包裹的组件沿着 类名

class A extends React.Component {
  render() {
    return <div className={this.props.className} />
  }
}

const StyledA = styled(A)``

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

A类扩展了React.Component{
render（）{
返回
}
}
const StyledA=styled（A）``
const B=styled.div`
${StyledA}{
}
`

注意：确保

类名

道具一直传播到被引用的组件，以防它不是直接子代

我认为这就是原因：

…在styled（）工厂中包装

A

，使其符合 插值——只需确保包裹的组件沿着 类名

class A extends React.Component {
  render() {
    return <div className={this.props.className} />
  }
}

const StyledA = styled(A)``

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

A类扩展了React.Component{
render（）{
返回
}
}
const StyledA=styled（A）``
const B=styled.div`
${StyledA}{
}
`

注意：确保

类名

道具一直传播到被引用的组件，以防它不是直接子代

---

您是说导入的

条

和

条铲

不能隐藏，但是

条铲

和

条铲

可以隐藏吗？你的问题（如果有）对我来说有点不清楚。（为了更文雅，编辑了这个问题）：不，我不能让他们中的任何一个隐藏起来。我试过使用

&:hover${Bars}{display:none}

和

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

你是说导入的

条

和

条

不能隐藏，但是

条

和

条

条可以隐藏吗？你的问题（如果有）对我来说有点不清楚。（为了更文雅，编辑了这个问题）：不，我不能让他们中的任何一个隐藏起来。我尝试了

&:hover${Bars}{display:none}

和

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

这两种方法，但由于一些奇怪的原因，它仍然对我不起作用（唯一的区别是我使用了

importx from…

和

notimport{x}从…

。但是，在将这些组件包装到单个子div中，然后调用该子div以隐藏在父div上之后，我能够让它工作。啊，对我来说，不同之处在于，我有一个嵌套的父div，这就是为什么我的代码看不到它（没想到这会有什么不同）。无论如何，做得很好，这回答了问题。我建议编辑答案代码以匹配沙盒中的代码（因为沙盒代码可能在将来消失）。解决方案中的代码是

样式化组件

文档的副本，我不会在回答后更改我的沙盒，除非我需要在此处更新答案。很高兴它对您有效！出于某些奇怪的原因，它仍然对我无效（唯一的区别是我使用

从…导入x

和

不导入{x}从…

。但是，在将这些组件包装到单个子div中，然后调用该子div以隐藏在父div上之后，我能够让它工作。啊，对我来说，不同之处在于，我有一个嵌套的父div，这就是为什么我的代码看不到它（没想到这会有什么不同）。无论如何，做得很好，这回答了问题。我建议编辑答案代码以匹配沙盒中的代码（因为沙盒代码可能在将来消失）。解决方案中的代码是

样式化组件

文档的副本，我不会在回答问题后更改沙盒，除非我需要在此处更新答案。很高兴它对您有效！