Styling a Formik Multi-Select component to look like a Material-UI select

Question

I'm using the following Formik select component with multiple selections but I am unsure how to style it using Material-UI styling (if possible) or my own styling to atleast make it look like a Material-UI select with some height and length as well as rounded borders.

Pls see here: https://codesandbox.io/s/l313z619l?file=/src/index.js:673-679

Answer 1

can you not just add a class to it? and style via that?

<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

There are a few ways to do it. Here's one such example provided by Formik. And here's a more in-depth guide from a third party.