如何使用react在检查器中添加字体大小和字体系列

<div style={{ fontSize: '16px' }}>Hello World</div>

// styles.css
.font-size-16 {
  font-size: 16px;
}

// Component.js
import React from 'react';
import './styles.css';

const Component = () => {
  return <div className="font-size-16">Hello World</div>;
}

export default Component;

<div style={{ fontFamily: 'Arial, sans-serif' }}>Hello World</div>

// styles.css
.font-family-arial {
  font-family: Arial, sans-serif;
}

// Component.js
import React from 'react';
import './styles.css';

const Component = () => {
  return <div className="font-family-arial">Hello World</div>;
}

export default Component;

import React, { useState } from 'react';

const Component = () => {
  const [fontSize, setFontSize] = useState('16px');
  const [fontFamily, setFontFamily] = useState('Arial, sans-serif');

  return (
    <div>
      <div style={{ fontSize, fontFamily }}>Hello World</div>
      <input
        type="text"
        value={fontSize}
        onChange={(e) => setFontSize(e.target.value)}
      />
      <input
        type="text"
        value={fontFamily}
        onChange={(e) => setFontFamily(e.target.value)}
      />
    </div>
  );
}

export default Component;