reactjs - Is there a way to target a nested JSS styled component within another JSS styled component? [JSS-nested/Styled-JSS/Material UI (React)]

Question

Is it possible to target a styled JSS object within another styled JSS object in a similar way that styled components allows?

Here's an example of what I'm talking about with Styled Components:

const Child = styled.div`
  color: red;
`;

const Parent = styled.div`
  display: flex;
  ${Child}:hover {
    color: blue
  }
`;

Is this possible in JSS?

Fyi I'm using Material UI v4's styling solution which is based off JSS.

question from:https://stackoverflow.com/questions/66055589/is-there-a-way-to-target-a-nested-jss-styled-component-within-another-jss-styled

Answer 1

use the & ampersands along with brackets [] for accomplish that in JSS:

const Child = styled(div)({
  color: 'red',
});

const Parent = styled(div)({
  display: 'flex',
  [`& ${Child}:hover`]: {
    color: 'blue'
  }
});