Целевые компоненты стиля первого ребенка css
Я использую стилизованные компоненты и хочу настроить таргетинг на первого потомка 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>
)
Ответы 4
Между & и :first-child не должно быть пробелов.
&:first-child {
margin-bottom: 20px;
}
Странный. Правильно ли применяется свойство font-size?
Я немного обновил свой вопрос, в теге span есть p, это как-то связано с тем, что он не работает? Извините за то, что не включил ранее.
@dan прав, это было пустое место. Посмотрите эту демонстрацию: Все работает: codeandbox.io/s/8882z34y19
Вы можете проверить обновленный вопрос - поэтому он выключен
Наконец-то я понял вашу проблему. Стилизованный компонент путает с первыми двумя собственными тегами 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>Вот демонстрация
Надеюсь, поможет :)
Я немного обновил свой вопрос, в теге span есть p, это как-то связано с тем, что он не работает? Извините за то, что не включил ранее. Кроме того, когда я использую ваш код, он весь синий, поэтому по какой-то причине первый ребенок не работает
так странно, все еще не работает для меня здесь. В любом случае даст вам оба голоса за
@Thinker lol Я написал почти те же самые слова, а также предоставил демонстрацию, используя два разных цвета. Я думаю, мы могли бы быть css-соулмейтами, .. шучу ..: D
Вы можете проверить обновленный вопрос - поэтому он выключен
@peterflanagan, вы правы. Теперь у меня проблема. Это из-за первых двух тегов p. Я обновил свои решения. Надеюсь, поможет :)
лучше использовать: last-of-type для определенного стилизованного компонента вместо использования: nth-child, и он отлично работает
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;
}
`;Используйте как это
const Text = styled.p`
font-size: 12px;
> * {
&:first-child {
margin-bottom: 20px;
}
}
`;
Это работает хорошо, однако было бы очень полезно обновить ответ, чтобы указать, почему это работает.
это то, что я тоже думал, и тоже пробовал это, но это не работает