Use displayName of parent non-glamorous component name

[emattias]

I would like it to use the displayName of my custom components since I rarely give the glamorous components names.

This example hopefully explains what I mean better:

const SideNav = (props) => {
  const { data: {
    merchant_logo: logo,
    merchant_name: name,
  } } = props

  return (
      <g.Div
        css={{
          backgroundColor: '#2B2C2C',
        }}
      >
        <g.Figure
          css={{
            margin: 0,
          }}
        >
        text
        </g.Figure>
      </g.Div>
  )
}

In the example above the first div would get the className of something like SideNav-div and the <g.Figure /> would get something like SideNav-div-figure

[kentcdodds]

Hi @emattias! I've thought about how we could do something like that... I wonder though what the value would be, because you already have SideNav appearing in ReactDevTools, then you can clearly see the g.Div followed by a g.Figure. I'm just not certain what more information would give you which you don't already readily have... 🤔

[emattias]

I rarely use react devtools. I use glamorous.config.useDisplayNameInClassName = true and the regular element tab in chrome devtools instead (because that workflow can be used in any web project, not just ones using react).

There I don't know about SideNav. Also, if the custom component (SideNav in my example) is a large one, it is still useful to see which element is from the className rather than having to go up the dom tree and then back again to understand which element is which.

[kentcdodds]

Ok, I think I can get behind that. Might be a little challenging, but I'd be open to a pull request