如何在React.js中更改与媒体查询相关的字体？

@media (max-width: 768px) {
  .mobile-font {
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-font {
    font-size: 16px;
  }
}

@media (min-width: 1025px) {
  .desktop-font {
    font-size: 18px;
  }
}

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1 style={{ fontSize: '20px' }}>默认字体</h1>
        <h2 className="mobile-font">移动设备字体</h2>
        <h2 className="tablet-font">平板设备字体</h2>
        <h2 className="desktop-font">桌面设备字体</h2>
      </div>
    );
  }
}

export default MyComponent;