2
votes

Comment faites-vous le survol conditionnel dans les composants stylisés?

J'ai un composant qui, basé sur certains accessoires, souhaite pouvoir changer l'arrière-plan en survol. mais basé sur d'autres accessoires, le survol ne devrait rien faire. est-ce possible?

export const Container = styled.div`

    &:hover {
        background: ${({ shouldHover }) => shouldHover ? 'red' : '' };
    }
`

mais cela ne fonctionne pas. des suggestions sur la manière de procéder?

javascript reactjs styled-components

1 commentaires

Copie possible de Composants stylisés: accessoires pour survoler

4 Réponses :

1
votes

Vous pouvez essayer quelque chose comme ce qui suit, qui peut vous aider:

import { css, styled } from 'styled-components'

styled.div`
   ${props => props.shouldHover && css`
      &:hover {
        background: 'red';
      }
   `}
`

0 commentaires

1
votes

Cela fonctionne pour moi

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
const Container = styled.div`
  & > h2 {
    &:hover {
      background: ${props => (props.shouldHover ? "red" : "none")};
    }
  }
`;
function App({ shouldHover }) {
  return (
    <Container shouldHover>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic shappen!</h2>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App shouldHover />, rootElement);

Codesandbox p >

0 commentaires

2
votes

Cela fonctionnera:

export const Container = styled.div`
    ${ props => props.shouldHover 
        ? '&:hover { background: red }' 
        : ''
    }
`;

0 commentaires

0
votes

Vous pouvez rendre l'arrière-plan conditionnel en fonction des accessoires que vous transmettez. Voici un exemple où le div change en fonction de plusieurs conditions différentes.

const Container = styled.div`
  background: blue;

  &:hover {
    background: ${props => props.shouldHoverRed 
      ? 'red'
      : props.shouldHoverGreen
      ? 'green'
      : props.shouldHoverOrange
      ? 'orange'
      : 'blue'
    };
  }
`

La valeur par défaut est le bleu et en fonction de l'accessoire passé, il rendra différentes couleurs pour l'arrière-plan au survol.

0 commentaires