React Select wrapped in Controller cannot be styled

[king612]

I am trying to use a React Select wrapped Component control, but Controller appears to inject a bunch of CSS on the fly that prevents normal styling (of either) using className. This is quite annoying, so I wonder if I'm doing something wrong.

I have a drop down built as shown below.

I'm showing the className at both levels for illustration, but at either level, it is totally ignored:

                    <div className="form-group col-md-2">
                        <label>Type</label>
                        <Controller className="form-control form-control-sm"
                            as={<Select className="form-control form-control-sm" />}
                            options={typeOptions}
                            name="type"
                            control={control}
                            onChange={([selected]) => {
                                return { value: selected };
                            }}
                            rules={{ required: true }}
                        />
                        { errors.type && <span className="has-error">Locus type is required</span> }
                    </div>

Either way, you get this hosed up rendering that looks like this:

Presumably because of all this injected CSS:

I haven't been able to find any way around this.

Any suggestions would be greatly appreciated.

[bluebill1049]

you can use render prop, https://react-hook-form.com/api/#Controller

eg:

<Controller
  control={control}
  name="test"
  render={(
    { onChange, onBlur, value, name, ref },
    { invalid, isTouched, isDirty }
  ) => (
    <Checkbox
      onBlur={onBlur}
      onChange={(e) => onChange(e.target.checked)}
      checked={value}
      inputRef={ref}
    />
  )}
/>

[king612]

Thank you, but this was a CSS styling issue. Not seeing how this would solve that.

[bluebill1049]

can't you add className in the checkbox example above? this can then apply to your react-select question.

[king612]

Ah, yes. I just wasn't sure which level it would go on (Controller or Checkbox / Select). I'll try that - thanks!