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

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

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>;

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;