Target another styled component on hover

Related searches

What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button.

I could implement some state on the component and toggle a property on hover but was wondering if there is a better way to do this with styled-cmponents.

Something like the following doesn't work but would be ideal:

const Wrapper = styled.div`
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  &:not(:last-child) {
    margin-bottom: 2rem;
  }
  &:hover {
    .button {
      display: none;
    }
  }
`

As of styled-components v2 you can interpolate other styled components to refer to their automatically generated class names. In your case you'll probably want to do something like this:

const Wrapper = styled.div`
  &:hover ${Button} {
    display: none;
  }
`

See the documentation for more information!

The order of components is important. It will only work if Button is defined above/before Wrapper.


If you're using v1 and you need to do this you can work around it by using a custom class name:

const Wrapper = styled.div`
  &:hover .my__unique__button__class-asdf123 {
    display: none;
  }
`

<Wrapper>
  <Button className="my__unique__button__class-asdf123" />
</Wrapper>

Since v2 is a drop-in upgrade from v1 I'd recommend updating, but if that's not in the cards this is a fine workaround.

Advanced Usage, styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This function will receive the parent theme, that is from another <ThemeProvider> higher up the tree. element, e.g. styled.div); a React component instance (if targeting a custom component placeholder="Hover to focus! target child element styled components. Ask Question Asked 2 years, 2 months ago. Active 2 years, 2 months ago. Target another styled component on hover. 0.

Similarly to mxstbr's answer, you can also use interpolation to reference a parent component. I like this route because it encapsulates a component's styling a little better than referencing the child component in the parent.

const Button = styled.button`
  ${Wrapper}:hover & {
    display: none;
  }
`;

I couldn't tell you when this feature was introduced but this works as of v3.

Relevant link: https://www.styled-components.com/docs/advanced#referring-to-other-components

React Styled Components Tutorial, A beginner friendly tutorial for CSS-in-JS with Styled Components in React. scoped to a single component and does not leak to any other element in the page. normal style.css document and even use pseudo-selectors like :hover . function, it is also assigned a stable CSS class for use in targeting. I want to apply a &:hover only when a prop is passed - in this situacion: animated const AnimationContainer = styled.div` transform: translate(0%); transition: 0.3s ease-out; &:hover { // apply hover only when $(props.animated) is paased position: fixed; transform: translate(0%, -30%); transition: 0.3s ease-out; } `;

the solution for me was this...

   const Content = styled.div`

  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

how to target sibling styled component on focus · Issue #1186 , Any help will be appreciated! const Wrapper = styled.div` width: 300px; `; const Label = styled.label` how to target sibling styled component on focus #1186 https://www.styled-components.com/docs/advanced#referring-to-other-​components It worked with hover in others that I tried, but not with focus. MaterialUI Custom Hover Style. Ask Question Asked 1 year, Target another styled component on hover. 1. style not applied to SVGIcon in MaterialUI React. 2.

Targeting Of Child Component Instances · Issue #1302 · styled , If a child component is swapped out for another, the layout breaks. I've always followed a pattern where a component should only be responsible  So in this case, the state should not be stored in the button component, because it needs to be accessed by another component which is not one of its children. Instead, you should create a parent component that is responsible for storing the hover state, and also renders both the button and image components.

10 useful tips for Styled Components - Pitipat Srichairat, Here at Forviz, it has been 10 months since we introduced styled-components as our main tool React Native learning experiences great because it doesn't feel like another language (css, ${Link}:hover & { // <-- This is what we can do now. import styled from 'styled-components' const Button = styled.button`` import styled from 'styled-components' const Button = styled.button`` This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a tagged template literal.

Shop Target online and in-store for everything from groceries and essentials to clothing and electronics. Save 5% every day with your Target RedCard.

Comments