Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Target another component on hover using emotion-js

See original GitHub issue

Hello i have a problem to target another component in focus using emotion-js

i try this:

  &:hover + ${WrapScrollable} {
    background: red;
  }

but dont work

my code:

const WrapScrollable = styled.div`
  height: calc(100% - 165px);
  overflow: scroll;
  background: orange;
  margin-bottom: 100px;
`;

const Litem = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background: hotpink;
  &:hover + ${WrapScrollable} {
    background: red;
  }
`;

example:

https://codesandbox.io/s/dazzling-turing-qbzlh?file=/src/App.js

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

Andaristcommented, May 14, 2020

Use data attribute if needed: https://codesandbox.io/s/festive-ramanujan-jlhds?file=/src/App.js

0reactions

JuanDiegoAcostaTcommented, Jul 16, 2020

Use data attribute if needed: https://codesandbox.io/s/festive-ramanujan-jlhds?file=/src/App.js

this Workssss

Top Results From Across the Web

Target another component on hover using emotion-js

Here is my code and what I have tried. import React from 'react'; import styled from '@emotion/styled'; import { Link } from 'gatsby';...

Styled Components - Emotion

Targeting another emotion component Similar to styled-components, emotion allows for emotion components to be targeted like regular CSS selectors when using @ ......

How to style React Router links with styled-components

Let's look at how to use styled-components and TypeScript to style React Router links in an application's navbar.

Style library interoperability - Material UI - MUI

Note: If you are using styled-components and have StyleSheetManager with a custom target , make sure that the target is the first element...

goober: Introduction

goober, a less than 1KB css-in-js solution. ... the two most known css-in-js packages: styled-component and emotion. ... Render with target *1, ✓,,....