Emotion: Adding a className to a `styled` component.

[ghost]

This is more of a question than an issue. I've tried a few various ways to achieve my desired results, I'm not sure what I'm doing wrong.

I have a component as such:

import styled from 'react-emotion';

export const Main = styled("main")`
  max-width: 1000px;
  margin: auto;
  background: #fe8a00;
`

in another file, I am importing Main and I'm trying to "extend" the properties with styled like so:

const BeerListContainer = styled(Main)`
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
`

I'm trying to add a cx to it. In your documentation, the only time a rendered component can receive a className is like so:

 export const Main = (props: IMainProps) => (
   <main className={cx(css`
     max-width: 1000px;
     margin: auto;
     background: #fe8a00;
   `, "main")}>
     {props.children}
   </main>
 );

Although this works (renders and adds a className), the styles are not "extended". Do you have any suggestions? I would like to use styled with a cx as an extension of Main.

[tkh44]

Does this not work?

<BeerListContainer className={css(`...`)} />

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.