9
votes

Target first-child css styled-components

J'utilise des composants stylisés et je souhaite cibler le premier enfant de Text , mais je ne peux pas le faire.

const Text = styled.p`
    font-size: 12px;
    &:first-child {
        margin-bottom: 20px;
    }
`;

... component

return(
   <div>
      <p>I am just regular text</p>
      <p>Me too</p>
      <Text>Hello Joe</Text> // this should have the margin bottom
      <Text>Goodbye</Text >
   </div>
)

reactjs css sass styled-components

0 commentaires

4 Réponses :

7
votes

Il ne devrait pas y avoir d'espace entre le & et le :first-child

&:first-child {
    margin-bottom: 20px;
}

5 commentaires

c'est ce que je pensais aussi, et j'avais essayé ça aussi, mais ça ne marche pas

Impair. La propriété font-size s'applique-t-elle correctement?

@dan a raison, c'était l'espace vide. Vérifiez cette démo: tout fonctionne: codesandbox.io/s/8882z34y19

pouvez-vous vérifier la question mise à jour - c'est pourquoi elle est désactivée

17
votes

Enfin, j'ai votre problème. Le composant stylisé se confond avec les deux premières balises p natives (de mon point de vue) et c'est la raison pour laquelle le CSS n'est pas appliqué.

J'utiliserai une solution de contournement comme celle-ci:

const Text = styled.p`
  font-size: 12px;
  color: blue;
  &.colors {
    margin-bottom: 20px;
    color: red !important;
  }
`;

 <div>
    <p>I am just regular text</p>
    <p>Me too</p>
    <Text className="colors">Hello Joe</Text>
    <Text>Goodbye</Text>
</div>

En faisant cela, vous sélectionnez le troisième enfant (qui inclut les deux premières balises p ) pour le CSS

OU, vous pouvez faire quelque chose comme ceci: Ajouter un nom de classe pour la balise et donner du CSS pour cette classe.

const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

Voici la démo

J'espère que cela aide :)

5 commentaires

J'ai légèrement mis à jour ma question, il y a un span dans la balise p , cela aurait-il quelque chose à voir avec le fait que cela ne fonctionne pas? Désolé de ne pas avoir inclus plus tôt. De plus, lorsque j'utilise votre code, tout est en bleu, donc pour une raison quelconque, le premier enfant ne fonctionne pas

si étrange, ne fonctionne toujours pas pour moi ici. Vous donnera de toute façon des votes positifs

@Thinker lol J'ai écrit presque exactement les mêmes mots et j'ai également fourni une démo en utilisant deux couleurs différentes. Je pense que nous pourrions être des âmes sœurs css, .. je plaisante ..: D

pouvez-vous vérifier la question mise à jour - c'est pourquoi elle est désactivée

@peterflanagan vous avez raison. Maintenant, je reçois le problème. C'est becz des deux premières balises p . J'ai mis à jour mes solutions. J'espère que cela aide :)

3
votes

il vaut mieux utiliser: last-of-type sur certains composants stylisés au lieu d'utiliser: nth-child et cela fonctionne parfaitement

const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

export default styled.div`
    :last-of-type {
        background: red;
    }`

0 commentaires

1
votes

Utilisez comme ça

const Text = styled.p`
   font-size: 12px;
    > * {
      &:first-child {
         margin-bottom: 20px;
      }
    }
`;

0 commentaires