0

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',
  },
});
Jaya Krishna
  • 313
  • 4
  • 14

1 Answers1

0

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:

Edit reverent-neumann-6o9fev

I hope this helps!

nuser137
  • 401
  • 2
  • 8
  • I get this, it works. Anything specifically wrong with the above code. That targeting another stitches comp doesn't seem to work. – Jaya Krishna May 27 '23 at 15:33
  • Could you please tell what is wrong with the above code? And what you have expected well? as you said here: `I am trying to change the background colour of a element, when hovered on another element using stitches composing API` – nuser137 May 27 '23 at 15:45
  • here is the link using acodesandbox https://codesandbox.io/s/serene-sun-9k8omj?file=/src/App.js I have two stitches components with Heading1 and Heading2. So, when i hover on Heading1. I would like to highlight the Heading2. But using the composition APII. I know, we can do it multiple ways. But trying to understand why composition API is not working. – Jaya Krishna May 27 '23 at 16:38