How to style child when hover on parent using Glamorous

Question

How would this CSS selector work in Glamorous?

.todo-list li:hover .destroy

Answer 1

glamorous component factory style arguments are powered by glamor which has support for contextual selectors. It can also take string arguments which will be added to the created dom elements class list.

So you might achieve something like asked with the following.

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

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

glamor selector documentation: https://github.com/threepointone/glamor/blob/master/docs/selectors.md