使用react更改动态表格表头的字体大小

import React, { useState } from 'react';

const DynamicTable = () => {
  const [headerFontSize, setHeaderFontSize] = useState(16);

  const handleFontSizeChange = (event) => {
    setHeaderFontSize(event.target.value);
  };

  return (
    <div>
      <label htmlFor="fontSize">表头字体大小：</label>
      <input
        type="number"
        id="fontSize"
        value={headerFontSize}
        onChange={handleFontSizeChange}
      />

      <table>
        <thead>
          <tr>
            <th style={{ fontSize: `${headerFontSize}px` }}>表头1</th>
            <th style={{ fontSize: `${headerFontSize}px` }}>表头2</th>
            <th style={{ fontSize: `${headerFontSize}px` }}>表头3</th>
          </tr>
        </thead>
        <tbody>
          {/* 表格内容 */}
        </tbody>
      </table>
    </div>
  );
};

export default DynamicTable;