如何实现目标样式的React Select多选下拉框？求技术帮助

我正在开发一个表单页面，希望将其调整为目标样式，其中的多选下拉框（带已选标签的多选组件）配置遇到了问题。我查阅了React Select文档后，在原生<select>标签里添加了isMulti属性，但完全没有效果。以下是我的代码，恳请提供解决思路。

index.js #

import React from 'react';

export default function Home() {
  return (
    <form className="container">
      <h4>General</h4>

      <div className="name block">
        <label htmlFor="frm-name">Name</label>
        <input
          id="frm-name"
          type="name"
          name="name"
          placeholder='Active input text'
          autoComplete="name"
          required
        />
      </div>

      <div className="context block">
        <div>
          <label htmlFor="frm-access">Access</label>
          <select 
            name="access" 
            id="frm-access" 
            type="text"
            autoComplete="given-access"
            >
            <option value="public">Public</option>
            <option value="private">Private</option>
          </select>
        </div>
        <div>
          <label htmlFor="frm-last">Purpose</label>
          <select 
            name="access" 
            id="frm-access" 
            type="text"
            autoComplete="given-access"
            >
            <option value="public">Support Agent</option>
          </select>
        </div>
      </div>

      <div className="context block">
        <div>
          <label htmlFor="frm-mode">Mode</label>
          <select 
            name="access" 
            id="frm-access" 
            type="text"
            autoComplete="given-access"
            >
            <option value="public">Chat</option>
          </select>

        </div>
        <div>
          <label htmlFor="frm-reference">Reference</label>
          <select 
            name="access" 
            id="frm-access" 
            type="text"
            >
            <option value="public">Include as link</option>
          </select>
        </div>
      </div>

      <div className="context block">
        <div>
          <label htmlFor="frm-limit">Limit chat to x messages</label>
          <input
            id="frm-limit"
            type="text"
            name="limit"
            placeholder='10'
            required
          />
        </div>
        <div>
          <label htmlFor="frm-context">Context size</label>
          <select 
            name="context" 
            id="frm-context" 
            type="text"
           >
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option valu="large">Large</option>
          </select>
        </div>
      </div>

      <div className="block sources">
        <label htmlFor="frm-sources">Sources</label>
        <select 
          
          name="sources" 
          id="frm-source" 
          type="text"
          isMulti
          >
          <option value="source1">Source1</option>
          <option value="source2">Source2</option>
        </select>
      </div>

      <div className="button block">
        <button type="save">Save</button>
      </div>
    </form>
  );
}

globals.css #

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: #e7e4e4ca;
  min-height: 100vh;
  display: flex;
  color: rgb(5, 4, 2);
  justify-content: center;
  align-items: center;
}

.block {
  display: flex;
  flex-direction: column;
}

.context {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container {
  font-size: 0.8rem;
  border-radius: 10px;
  width: 105%;
  padding: 10px;
  box-shadow: 0 54px 55px rgb(78 78 78 / 25%), 0 -12px 30px rgb(78 78 78 / 25%),
    0 4px 6px rgba(31, 30, 30, 0.25), 0 12px 13px rgb(78 78 78 / 25%),
    0 -3px 5px rgb(78 78 78 / 25%);
}

.container input {
  font-size: 1.0rem;
  margin: 10px 0 10px 0px;
  border-color: rgb(221, 218, 218);
  padding: 10px;
  border-radius: 5px;
  background-color: #ffffff;
}

.container select {
  font-size: 1.2rem;
  margin: 10px 0 10px 0px;
  border-color: rgb(237, 221, 221);
  padding: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #9e9fa3
}

.context div {
  display: flex;
  flex-direction: column;
}

.block button {
  padding: 10px;
  font-size: 20px;
  width: 30%;
  border-radius: 5px;
  background-color: blue;
}

.button {
  display: flex;
  align-items: center;
}

textarea {
  resize: none;
}

• 核心问题: 你使用的是原生HTML的<select>标签，而isMulti是第三方库react-select的专属属性，原生select完全不识别该属性，因此添加后无效果。要实现目标中的多选下拉框，必须使用react-select组件替换原生select。
• 具体步骤:
  1. 安装react-select依赖：

     npm install react-select
     # 或使用yarn
     yarn add react-select
     

  2. 在index.js中导入组件：

     import Select from 'react-select';
     

  3. 替换Sources区域的原生select，同时添加状态管理（react-select为受控组件）：

     // 添加状态用于存储选中项
     const [selectedSources, setSelectedSources] = React.useState([]);
     // 定义下拉选项数组
     const sourceOptions = [
       { value: 'source1', label: 'Source1' },
       { value: 'source2', label: 'Source2' }
     ];
     // 替换原有的<select>标签
     <Select
       name="sources"
       id="frm-source"
       options={sourceOptions}
       isMulti
       value={selectedSources}
       onChange={setSelectedSources}
       placeholder="Select sources..."
     />
     

  4. 样式适配: react-select自带默认样式，若要与现有表单风格统一，可通过styles属性自定义样式，或调整全局CSS覆盖默认样式。
• 额外修复: 你的代码中多个<select>标签重复使用了id="frm-access"，会导致label与表单元素的关联失效，需给每个表单元素设置唯一id。

内容的提问来源于stack exchange，提问作者CrisV2