How to attach 2 css variables to an JSX element in React & Emotion

Viewed 337

How can I attach both style1 & style2 to the div below using the Emotion library?


const style1 = css`
  display: flex;
`

const style2 = css`
   width: 0;
`

const el= () => (
    <div css={style1}>
)

1 Answers

In Emotion you can do what's called composition:

const style1 = css`
  display: flex;
`

const style2 = css`
   width: 0;
`

const el= () => (
    <div 
        css={css`
            ${style1};
            ${style2};
        `}
    >
)
Related