你可以使用https://www.npmjs.com/package/multi-select-checkbox这个库来代替react-select，它有更多的定制

下面是我评论中的一个例子
基本上。你不能在另一个可点击元素中添加一个可点击元素。浏览器如何理解哪一个元素应该捕捉到点击，一个特定的元素还是全部元素？您可以使用JavaScript将select属性添加到所有选项中，并在select上使用属性multiple来允许这样做
以及一种可能的方法

const all = document.querySelectorAll("select option:not(:first-of-type");
let selectAll = document.querySelector("select option:first-of-type");

selectAll.addEventListener("click", function () {
  this.style.color="red";
  this.style.background="yellow";
    for (let i = 0; i < all.length; i++) {
      all[i].setAttribute("selected", "selected");
    }
});

select{height:14em}

<select multiple name="select">
  <option>Select All</option>
  <option value="a">Value A</option>
  <option value="b">Value B</option>
  <option value="c">Value C</option>
  <option value="d">Value D</option>
  <option value="e">Value E</option>
  <option value="f">Value F</option>
  <option value="g">Value G</option>
  <option value="h">Value H</option>
</select>

你好，我可能有一个解决这个问题的办法，如果你做一个

<form action="" method="POST">
    <div style="display: flex; flex-direction: column; max-height: 5em; overflow: auto;">
        <div>
            <input type="checkbox" name="test[]" id="test_1" value="test_1">
            <label for="test_1">Test</label>
        </div>
    </div>

<p>Scroll down for more options</p>
    <form action="" method="POST">
        <div style="display: flex; flex-direction: column; max-height: 5em; overflow: auto; border: 1px solid black">
            <div>
                <input type="checkbox" name="test[]" id="test_1" value="test_1">
                <label for="test_1">Test 1</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_2" value="test_1">
                <label for="test_1">Test 2</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_3" value="test_1">
                <label for="test_1">Test 3</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_4" value="test_1">
                <label for="test_1">Test 4</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_5" value="test_1">
                <label for="test_1">Test 5</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_6" value="test_1">
                <label for="test_1">Test 6</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_7" value="test_1">
                <label for="test_1">Test 7</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_8" value="test_1">
                <label for="test_1">Test 8</label>
            </div>
                        <div>
                <input type="checkbox" name="test[]" id="test_9" value="test_1">
                <label for="test_1">Test 9</label>
            </div>
        </div>
    </form>

如果你愿意的话，你可以在输入表单上设置一些bootstrap select样式，但是这个对我来说很好用