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

Question

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

johannchopin · Accepted Answer · 2020-11-19 08:37:42Z

2

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

answered Nov 19, 2020 at 8:37

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sinisterOrange · Accepted Answer · 2023-08-19 03:49:52Z

0

The above solution can be simplified as follows:

const el= () => (
    <div css={[style1, style2]}>
)

This type of composition for CSS objects is also in the documentation (but not easy to find): https://emotion.sh/docs/best-practices#method-1-export-css-objects

const style1 = css({
  display: flex;
})

const style2 = css({
  width: 0;
})

const combinedStyles = css([style1, style2])

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

answered Aug 19, 2023 at 3:49

sinisterOrange

5111 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related