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

Question

Как видно из названия, это работает со стилизованными компонентами, которые находятся в одном файле 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>
  );
};

export default ParentComponent;

Answer 1

Я думаю, это предостережение является причиной:

... упаковка A на фабрике styled () делает ее пригодной для интерполяции - просто убедитесь, что обернутый компонент проходит вдоль className .

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

const StyledA = styled(A)``

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

ПРИМЕЧАНИЕ : убедитесь, что className пропеллер распространен все путь к компоненту, на который ссылаются в случае, если он не является прямым потомком.