I am using style attribute in React Select but its showing an error in SPFx react. Can someone please tell how to resolve this?

Question

I am using the below code:

import Select from "react-select";

                <Select
                  className="form-control-sm"
                  name="form-field-name"
                 style={{ fontSize: "medium", color: "black" }}
                  id="userDocTypeName"
                />

Error"

Type '{ className: string; name: string; style: { fontSize: string; color: string; }; id: string; onChange: (selectValue: any) => void; options: any; value: any; }' is not assignable to type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<any, false, GroupBase<any>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.
  Property 'style' does not exist on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<any, false, GroupBase<any>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'. Did you mean 'styles'?

Answer 1

As per official documentation of react-select provided here, you should provide style like below:

<Select
      className="form-control-sm"
      name="form-field-name"         
      id="userDocTypeName"
      options={[
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ]}
      styles={{
        control: (baseStyles, state) => ({
          ...baseStyles,
          fontSize: "medium", color: "black"
        })
      }}
    ></Select>

Note: I would suggest to use Fluent UI Controls in SPFx react specially because here it will get design of control always based on current theme of the SharePoint.

Fluent UI