reactjs - 使用 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