CODEWITHSUNDEEP
reactjs
sybercoda
sybercoda

Reputation: 565

Hide component 1 border when hovering over component 2 using sibling selector in ReactJS useStyles

ReactJS useStyles newbie dilemma. I have a parent component where I'm importing two child components and trying to hide the border of component 1 when hovering over component 2 using sibling selector but am having difficulty getting it to work. I suspect it has to do with the fact that these two components are children since I've seen other ReactJS/useStyles examples where using the sibling selector and ${some_class} works when inside the same component. Not sure what I'm doing wrong. Any assistance is greatly appreciated! I've provided parent code snippet below but you can view my sandbox at https://codesandbox.io/s/sibling-selector-jss-forked-8yscb?file=/src/index.js

FYI, for comparison purposes I'm dropping a link to another sandbox where you can see the sibling selector in action when used in a single component https://codesandbox.io/s/editable-div-jss-cjdn8?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import CompOne from "./CompOne";
import CompTwo from "./CompTwo";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  compOneAfter: {
    "&::after": {
      content: '""',
      borderRight: "2px solid red",
      paddingLeft: "20px"
    },
    "&:hover": {
      "&::after": {
        display: "none"
      }
    }
  },
  compTwoAfter: {
    "&::after": {
      content: '""',
      borderRight: "2px solid red",
      paddingLeft: "20px"
    },
    "&:hover": {
      "&::after": {
        display: "none"
      }
    },
    /* The intent is for this sibling selector */
    /* to hide compOneAfter right border when hovering */
    /* over component two */
    "&:hover ~ $compOneAfter": {
      "&::after": {
        display: "none"
      }
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div>
      <CompOne compOneAfter={classes.compOneAfter} />
      <CompTwo compTwoAfter={classes.compTwoAfter} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 0

Views: 92

Answers (1)

user16719727
user16719727

Reputation: 26

May be like this

import React from "react";
import ReactDOM from "react-dom";
import CompOne from "./CompOne";
import CompTwo from "./CompTwo";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  parent: {
    '& $siblings': {
      "&::after": {
        content: '""',
        borderRight: "2px solid red",
        paddingLeft: "20px"
      },  
      "&:hover": {
        "&::after": {
          content: '""',
          borderRight: "2px solid red",
          paddingLeft: "20px"
        },    
      }
    },
    "&:hover": {
      '& $siblings': {
        "&::after": {
          border: 0
        }  
      }
    }
  },
  siblings: {}
});

function App() {
  const classes = useStyles();
  return (
    <div className={classes.parent}>
      <CompOne
        compOneAfter={classes.siblings}
      />
      <CompTwo
        compTwoAfter={classes.siblings}
      />
      <CompTwo
        compTwoAfter={classes.siblings}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 1

Related Questions