如何在react原生函数中设置映射数据的样式

function MyComponent() {
  const data = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
  };

  return (
    <div>
      {Object.entries(data).map(([key, value]) => (
        <div key={key} style={{ color: value === 'value1' ? 'red' : 'blue' }}>
          {key}: {value}
        </div>
      ))}
    </div>
  );
}

.red {
  color: red;
}

.blue {
  color: blue;
}

import styles from './styles.css';

function MyComponent() {
  const data = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
  };

  return (
    <div>
      {Object.entries(data).map(([key, value]) => (
        <div key={key} className={value === 'value1' ? styles.red : styles.blue}>
          {key}: {value}
        </div>
      ))}
    </div>
  );
}