如何使用Glamorous将孩子悬停在父母身上

Question

这个CSS选择器如何在Glamorous中运行？

.todo-list li:hover .destroy

Answer 1

魅力四射的组件工厂风格参数由魅力驱动，支持上下文选择器。它还可以使用字符串参数，这些参数将添加到创建的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