target первый-дочерний css styleled-компоненты - PullRequest
Новая
       8

target первый-дочерний css styleled-компоненты

0 голосов
/ 02 января 2019

Я использую стилевые компоненты и хочу нацелить первый дочерний элемент Text, но не могу этого сделать. 

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>
)

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Наконец-то я понял вашу проблему. Стилизованный компонент путает с первыми двумя собственными тегами p (с моей точки зрения), и именно поэтому CSS не применяется.

Я буду использовать обходной путь, подобный этому: 

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

Делая это, вы выбираете третьего потомка (который включает первые два тега p) для CSS

ИЛИ, вы можете сделать что-то вроде этого: добавить имя класса для тега и дать CSS для этого класса. 

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>

Вот демоверсия

Надеюсь, это поможет:)

0 голосов
/ 02 января 2019

Между & и :first-child

&:first-child {
    margin-bottom: 20px;
}
не должно быть пробела
...