html - 如何在 React 和 Emotion 中将 2 个 css 变量附加到 JSX 元素

Question

如何使用 Emotion 库将 style1 和 style2 附加到下面的 div？

const style1 = css`
  display: flex;
`

const style2 = css`
   width: 0;
`

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

Answer 1

在 Emotion 中，您可以执行所谓的 composition 操作:

const style1 = css`
  display: flex;
`

const style2 = css`
   width: 0;
`

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