CODEWITHSUNDEEP
reactjsstyled-components
Fiddle Freak
Fiddle Freak

Reputation: 2041

hide imported child component on hover using styled-components

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;

Upvotes: 0

Views: 773

Answers (1)

Drew Reese
Drew Reese

Reputation: 202854

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.

Edit fast-paper-i0tg0

Upvotes: 2

Related Questions