如何样式化react本机选取器

import React, { useState } from 'react';

const NativeSelect = () => {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      {/* 添加选项 */}
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  );
};

export default NativeSelect;

import React, { useState } from 'react';
import './NativeSelect.css';

const NativeSelect = () => {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <select className="native-select" value={selectedValue} onChange={handleChange}>
      {/* 添加选项 */}
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  );
};

export default NativeSelect;

.native-select {
  /* 添加样式 */
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

import React from 'react';
import NativeSelect from './NativeSelect';

const App = () => {
  return (
    <div>
      <h1>样式化React本机选择器</h1>
      <NativeSelect />
    </div>
  );
};

export default App;