how to change react-select style options with TypeScript

Question

I am trying to change the style options for my react-select component (specifically trying to get rid of the border and change the font and text color) but am not sure how to fix the TypeScript errors. I have the following code:

import React, {useState} from 'react';
import Select, { ValueType } from 'react-select';

type OptionType = {
    value: string;
    label: string;
  };

const LanguageSelector = () => {
    const languageOptions: OptionType[] = [
        { value: 'English', label: 'EN' },
        { value: 'German', label: 'DE' },
        { value: 'French', label: 'FR' },
      ];
    const [selectedOption, setSelectedOption] = useState<ValueType<OptionType, false>>(languageOptions[0]);
    const handleChange = (option: ValueType<OptionType, false>) => setSelectedOption(option);
    const customStyles = value => ({
        control: (provided, state) => ({
          ...provided,
          alignItems: "baseline",
          backgroundColor: value ? "gray" : "white"
        })
      });

    return (
    <div>
        <Select
            value={selectedOption}
            onChange={handleChange}
            options={languageOptions}
            styles={customStyles}
        />
    </div>
    )
};

export default LanguageSelector;

The errors are that provided, state, and value all implicitly have an 'any' type. I'm assuming provided would have type CSSProperties, but am unsure about state. Does anyone know what these types should be?

what is the meaning of Control, provided and state here?

MukulSharma
– MukulSharma

2021-03-08 18:11:46 +00:00
Commented Mar 8, 2021 at 18:11 — MukulSharma
– MukulSharma, Commented Mar 8, 2021 at 18:11
@sbuck89 Does my answer solves your problem?

Benedek Simo
– Benedek Simo

2021-03-17 08:51:01 +00:00
Commented Mar 17, 2021 at 8:51 — Benedek Simo
– Benedek Simo, Commented Mar 17, 2021 at 8:51

Benedek Simo · Accepted Answer · 2021-03-10 07:39:15Z

1

First of all, I think you don't need the customStyles to be a function (as you are not using the value at all.)

Secondly, can add type to your customStyles with StylesConfig type, which expects OptionType, false as two generics.

const dropdownStyles: StylesConfig<OptionType, false> = {
  container: (provided) => ({
    ...provided,
    flexGrow: 1,
  }),
  control: (provided) => ({
    ...provided,
    background: '#fff',
    borderColor: '#9e9e9e',
    minHeight: '24px',
  }),
}

As a plus, you could even use OptionTypeBase from their types if you don't have extra properties in your options array's properties.

answered Mar 10, 2021 at 7:39

Benedek Simo

5245 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to change react-select style options with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related