CODEWITHSUNDEEP
reactjsglamorous
mepler
mepler

Reputation: 947

How to style child when hover on parent using Glamorous

How would this CSS selector work in Glamorous? 

.todo-list li:hover .destroy

Upvotes: 1

Views: 564

Answers (1)

lukejohn
lukejohn

Reputation: 141

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

Upvotes: 2

Related Questions