Composing styles with stitches composition API

Question

I am trying to change the background colour of a element, when hovered on another element using stitches composing API. But, that doesn't seem to work. The code looks fine, but i am not sure where it's going wrong.

https://codesandbox.io/s/serene-sun-9k8omj?file=/src/App.js

const Heading2 = styled("h2", {
  background: "red",

  "&:hover": {
    background: "green"
  }
});

const Heading1 = styled("h1", {
  background: "blue",
  "&:hover": {
    background: "green",

    [`& ${Heading2}`]: {
      background: "yellow"
    }
  }
});

Here is the example syntax provided from then docs.

https://stitches.dev/docs/styling#target-a-stitches-component

const Button = styled('button', {
  // base styles

  [`& ${Icon}`]: {
    marginLeft: '5px',
  },
});

Answer 1

I think you could try like this: By using Combinator selectors.

And you would want to use backgroundColor not this background.

const Heading1 = styled("h1", {
  backgroundColor: "blue",
  "&:hover": {
    backgroundColor: "green",

    "& + h2": {
      backgroundColor: "yellow"
    }
  }
});

You could also mess with live demo:

I hope this helps!