css - 为 Formik Multi-Select 组件设置样式，使其看起来像 Material-UI 选择

Question

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

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

Answer 1

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

<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>

Answer 2

有几种方法可以做到这一点。这是 Formik 提供的一个这样的例子。这是来自第三方的更深入的指南。