在React中设置介质馈送

import React from 'react';
import styles from './MyComponent.module.css'; // 导入CSS模块

function MyComponent() {
  return (
    <div style={{
      // 在这里设置媒体查询
      '@media (max-width: 768px)': {
        backgroundColor: 'red',
      },
      '@media (min-width: 769px) and (max-width: 1024px)': {
        backgroundColor: 'blue',
      },
      '@media (min-width: 1025px)': {
        backgroundColor: 'green',
      },
    }}>
      {/* 组件内容 */}
    </div>
  );
}

/* MyComponent.module.css */

.container {
  /* 在这里设置媒体查询 */
  @media (max-width: 768px) {
    background-color: red;
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    background-color: blue;
  }

  @media (min-width: 1025px) {
    background-color: green;
  }
}

// MyComponent.jsx

import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.container}>
      {/* 组件内容 */}
    </div>
  );
}