[Question] Passing classes from parent component

Hi

I migrated to Emotion from Glamorous and I miss one thing (or maybe I just don’t know how to do it). It’s connected to this: https://emotion.sh/docs/class-names, but I don’t think it’s actually good developer experience.

What I do is writing self-contained components, which are basically not positioned (no margins, sizes etc) and positioning happens in parent, which layout them.

To achieve that, there are two ways to do this: 1: Wrapper:

  <div className="layout">
    <div className="layout__nav">  
      <NavComponent />
    </div>
  <div />

This more-or-less works, but has some limitations, also required extra markup

2: Mix classes

  <div className="layout">
     <NavComponent className="layout__nav" />
  <div />

This is preferable to me, my component looks like this then:

  const NavComponent = ({...props}) => (<SomeEmotionStyled {...props}>...</SomeEmotionStyled>)

This worked in Glamorous. I’ve seen in <ClassNames> HOC this can be achievable, but it’s a lot of extra code, when I use it quite often.

What is desirable approach here? css function doesn’t return css class, so it’s not easy to pass it down

[Andarist]

Hopefully, everyone engaged in this conversation has resolved their issue. If not please open a new one.

[carpben]

I mostly work with Emotion 9, but also work with Emotion 10. Here is an example of what I do :

const Link = styled("a")`
    colour: ${COLORS.GREEN};
    text-decoration: underline;
    ${ ( {stl}) => stl }
`
const BorderedBox = styled("div")`
    border: 1px solid black; 
    ${ ( {stl}) => stl }
`
const Parent = (props) => (
    <BorderedBox stl="margin: 10px;"/>
        Visit us at 
        <Link href="http://www.ourSite.com"  stl=`
            padding: 5px; 
            font-size: 22px; 
        `> 
            Our Cool Website
        </Link>
    </BorderedBox> 
)