Open Aarbel opened 1 year ago
Though I could see Stitches supporting a displayName
like this...
const ScrollableContent = styled('div', {
displayName: 'ScrollableContent',
...styles
})
It's probably simpler to just assign it yourself:
ScrollableContent.displayName = 'ScrollableContent'
Or, in a single expression (less readable, IMO):
const ScrollableContent = Object.assign(style('div', {
...styles
}), {
displayName: 'ScrollableContent'
})
Related: #1104 is an open issue to document the styled.withConfig()
API, which supports a displayName
and (if I'm reading the code correctly) assigns it here:
So, in your case, I think this will work:
const ScrollableContent = styled.withConfig({ displayName: 'ScrollableContent' })('div', { ...styles })
which—again, if I'm reading this correctly—will also inject ScrollableContent
into the generated CSS class:
Thanks a lot @shawnbot, i implement it and give you a feedback of the efficiency of the api
Hi stiches team,
is there a way that generated stitches components get the right component name inside react developper tools ? It's quite hard to read inside the react chrome inspector. In the examples bellow i would like to see
ScrollableContent
instead ofStyled.div
inside the react chrome inspector