hide imported child component on hover using styled-components

Question

Like the title says, this works with styled components sitting within the same js file (provided they are procedural-ordered above). But with imported child components I can't get it to work.

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;

Are you saying Bars and BarsHover, which are imported, can't be hidden, but DivBars and DivBarsHover can? Your question (if there is one) is a little unclear to me. — Drew Reese
(Edited the question for better clerity): no, I can't get any of them to hide. I've tried with both &:hover ${Bars} {display:none} and using &:hover ${DivBars} {display:none} — Fiddle Freak

Drew Reese Drew Reese · Accepted Answer · 2020-03-18T04:59:50

I think this caveat is the cause:

...wrapping A in a styled() factory makes it eligible for interpolation -- just make sure the wrapped component passes along className.
class A extends React.Component {
  render() {
    return <div className={this.props.className} />
  }
}

const StyledA = styled(A)``

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

NOTE: Ensure the className prop is propagated all the way to the component being referenced in the case that it isn't a direct descendent.

hide imported child component on hover using styled-components

1 Answers