web-dev-qa-db-fra.com

Pseudo-classes Before et After utilisées avec des composants stylés

Quelle est la bonne manière d'appliquer les pseudo-classes :before et :after à des composants stylisés?

Je sais que tu peux utiliser 

&:hover {}

appliquer la pseudo-classe :hover à un composant stylé. 

Est-ce que cela fonctionne pour tous les pseudo-éléments comme avant et après? 

J'ai essayé d'utiliser les stratégies &:before et &:after avec des exemples assez complexes et je ne suis pas sûr si mes tentatives ne fonctionnent pas, car quelque chose ne va pas dans mon exemple ou si ça ne marche pas comme ça. 

Est-ce que quelqu'un a une idée à ce sujet? Je vous remercie.

reactjspseudo-classstyled-components
7
archae0pteryx

Les pseudo-sélecteurs dans styled-components fonctionnent exactement comme dans CSS. (ou plutôt, Sass) Tout ce qui ne fonctionne pas est probablement un problème dans votre code spécifique, mais c'est difficile à déboguer sans voir le code réel!

Voici un exemple d'utilisation d'un :after simple:

const UnicornAfter = styled.div`
  &:after {
    content: " ????";
  }
`;

<UnicornAfter>I am a</UnicornAfter> // renders: "I am a ????"

Si vous publiez votre code, je serai probablement en mesure de vous aider à résoudre votre problème spécifique!

32
mxstbr

Cela imprimera le triangle au milieu de la div.

const LoginBackground = styled.div`
  & {
    width: 30%;
    height: 75%;
    padding: 0.5em;
    background-color: #f8d05d;
    margin: 0 auto;
    position: relative;
  }
  &:after {
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    border-top: solid 20px #f8d05d;
    transform: translateX(-50%);
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
  }
`;
0
Nalan Madheswaran