如何在jsx中使用if else进行媒体查询

import React from 'react';
import './styles.css'; // 引入CSS样式文件

render() {
  if (window.innerWidth < 768) {
    return (
      <div className="mobile-style">
        {/* 移动设备样式 */}
      </div>
    );
  } else {
    return (
      <div className="desktop-style">
        {/* 桌面设备样式 */}
      </div>
    );
  }
}

.mobile-style {
  /* 移动设备样式 */
}

.desktop-style {
  /* 桌面设备样式 */
}

/* 媒体查询 */
@media (max-width: 767px) {
  .desktop-style {
    display: none; // 在移动设备上隐藏桌面设备样式
  }
}

@media (min-width: 768px) {
  .mobile-style {
    display: none; // 在桌面设备上隐藏移动设备样式
  }
}