将 Formik Multi-Select 组件样式化，使其看起来像 Material-UI 选择

如何解决将 Formik Multi-Select 组件样式化，使其看起来像 Material-UI 选择

我正在使用以下具有多个选择的 Formik 选择组件，但我不确定如何使用 Material-UI 样式（如果可能）或我自己的样式来设置它的样式，以至少使它看起来像具有一定高度的 Material-UI 选择和长度以及圆形边框。

请看这里：https://codesandbox.io/s/l313z619l?file=/src/index.js:673-679

解决方法

你不能只给它添加一个类吗？和风格？

<Field
            component="select"
            name="names"
            className="yourMaterialUI-Select"
            // You need to set the new field value
            onChange={evt =>
              setFieldValue(
                "names",[].slice
                  .call(evt.target.selectedOptions)
                  .map(option => option.value)
              )
            }
            multiple={true}
          >
            {availableSelection.map(s => (
              <option key={s} value={s}>
                {s}
              </option>
            ))}
          </Field>

,

有几种方法可以做到。 Here's one such example provided by Formik. 和 here's a more in-depth guide from a third party。