Как стилизовать ребенка при наведении на родителя с помощью Glamorous

Question

Как стилизовать ребенка при наведении на родителя с помощью Glamorous

Как этот селектор CSS будет работать в Glamorous?

.todo-list li:hover .destroy

1

reactjs glamorous

Источник

user1544838 01 фев '18 в 19:06

1 ответ

Решение

Другие вопросы по тегам reactjs glamorous

user2256803 21 фев '18 в 12:51 2018-02-21 12:51 · Accepted Answer · 2018-02-21 12:51

Аргументы стиля фабрики гламурных компонентов основаны на гламуре, который поддерживает контекстные селекторы. Он также может принимать строковые аргументы, которые будут добавлены в список классов созданных элементов dom.

Таким образом, вы можете достичь чего-то вроде следующего:

const destroyClassname = 'destroy-button'
const Destroy = glamorous.button(destroyClassname, /** style arguments */)

const TodoList = glamorous.ul({
  [`& li:hover .${destroyClassname}`]: {
    /** style arguments */
  }
})

документация по выбору гламура: https://github.com/threepointone/glamor/blob/master/docs/selectors.md