如何将2个css变量附加到React & Emotion中的JSX元素

在React和Emotion中将两个CSS变量附加到JSX元素的方法如下：

首先，确保你已经安装了React和Emotion的相关依赖。
在你的React组件文件中，导入Emotion的css函数和React的useState钩子函数。

import { css } from '@emotion/react';
import { useState } from 'react';

在组件函数中，使用useState钩子函数创建两个状态变量来存储CSS变量的值。

const [color, setColor] = useState('red');
const [fontSize, setFontSize] = useState('16px');

这里我们创建了color和fontSize两个状态变量，并将它们的初始值分别设置为'red'和'16px'。

使用css函数创建一个样式对象，并在其中使用CSS变量。

const styles = css`
  color: ${color};
  font-size: ${fontSize};
`;

在这个样式对象中，我们使用${}语法将状态变量color和fontSize的值作为CSS变量的值。

在JSX元素中应用样式。

return <div css={styles}>Hello, World!</div>;

通过将样式对象作为css属性的值传递给JSX元素，我们可以将样式应用到该元素上。

完整的代码示例：

import { css } from '@emotion/react';
import { useState } from 'react';

const MyComponent = () => {
  const [color, setColor] = useState('red');
  const [fontSize, setFontSize] = useState('16px');

  const styles = css`
    color: ${color};
    font-size: ${fontSize};
  `;

  return <div css={styles}>Hello, World!</div>;
};

export default MyComponent;

这样，你就成功地将两个CSS变量附加到React和Emotion中的JSX元素上了。你可以通过修改状态变量的值来动态改变元素的样式。