使用 Glamorous 将鼠标悬停在父项上时如何设置子项样式

Question

这个 CSS 选择器在 Glamorous 中如何工作？

.todo-list li:hover .destroy

Answer 1

glamorous component factory style arguments 由支持上下文选择器的 glamor 提供支持。它还可以采用字符串参数，这些参数将被添加到创建的 dom 元素 class 列表中。

所以你可能会通过以下方式实现类似的要求。

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

使用 Glamorous 将鼠标悬停在父项上时如何设置子项样式

How to style child when hover on parent using Glamorous

reactjs

glamorous