如何在React.js中实现全背景图片的媒体查询？

import backgroundImage from './background.jpg';

render() {
  const backgroundStyle = {
    backgroundImage: `url(${backgroundImage})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  };

  return (
    <div style={backgroundStyle}>
      {/* 组件内容 */}
    </div>
  );
}

render() {
  const backgroundStyle = {
    // 默认背景图片样式
    backgroundImage: `url(${backgroundImage})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  };

  const mediaQueryStyle = {
    // 媒体查询条件下的背景图片样式
    '@media (max-width: 768px)': {
      backgroundImage: `url(${mobileBackgroundImage})`,
    },
  };

  return (
    <div style={{ ...backgroundStyle, ...mediaQueryStyle }}>
      {/* 组件内容 */}
    </div>
  );
}