У меня есть родительский элемент, у которого есть глубоко вложенный дочерний элемент, который может получить атрибут, если он выбран.
Как изменить цвет фона родительского элемента, только если глубоко вложенный дочерний элемент имеет атрибут selected?
<Parent>
<Child>
<NestedChild selected>
Вот что я пробовал:
const Parent = styled.div`
&[selected] { // But this only styled the child, not the parent}
`;
Его нет - CSS не позволяет элементу влиять на стиль его родителей, только его дочерних элементов или братьев и сестер.
Используйте useContext hook вместе с createContext и контекстом Provider или просто передайте обратный вызов на всех вложенных уровнях.
// set up some styles for `has-child-selected` class
// ...
const Parent = ({ ... }) => {
return <div className="parent">
...
</div>
}
const Child = ({ selected }) => {
const ref = useRef(null)
useEffect(() => {
ref.current.closest('.parent')
.classList[selected ? 'add' : 'remove']('has-child-selected')
}, [selected])
return <div ref={ref}>
...
</div>
}
Изменить: я понял, что даже не упомянул стилизованные компоненты в этом ответе, но не думаю, что это сильно изменится. Возможно, кто-то с большим знанием стилизованных компонентов сможет просветить.
Я думаю, вы можете сделать это только с помощью CSS. По крайней мере, я помню. попробуй это. вы можете изменить любой тег и любой атрибут
li:has(> a[href="https://css-tricks.com"]){
color:red;
}Похоже, сейчас это не работает. но проверьте, когда увидите это. : D: D
