Search code examples
htmlcssreactjsjsxemotion

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


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}>
)


Solution

  • 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};
            `}
        >
    )