web-dev-qa-db-fra.com

cibler les composants de style CSS du premier enfant

J'utilise des composants de style 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>
)
cssreactjssassstyled-components
4
peter flanagan

Enfin, j'ai eu votre problème. Le composant stylé se confond avec les deux premières balises natives p (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;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

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;
  &.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>

Voici la démo

J'espère que ça aide :)

7
Thinker

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

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

il vaut mieux utiliser: dernier de type sur certains composants stylisés au lieu d'utiliser: nième enfant et cela fonctionne parfaitement

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

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