typescript - Extrage CSSProperties personalizate în stilul react-select

Vreau să stilizez personalizat componenta mea react-select.

În prezent, mi-am definit stilurile astfel și funcționează bine:

const customStyles: StylesConfig<any, false> = {
            control: (provided, _) => ({
                ...provided,
                borderColor: '#0682A8',
                color: '#000',
                borderRadius: 21
            }),
            input: (provided, _) => ({
                ...provided,
                ':before': {
                    content: `"${properties.label}:"`,
                    textTransform: 'uppercase',
                    display: 'inline-block',
                    fontWeight: 'bold',
                    marginRight: 5
                }
            }),
            singleValue: (provided, _) => ({
                ...provided,
                ':before': {
                    content: `"${properties.label}:"`,
                    textTransform: 'uppercase',
                    display: 'inline-block',
                    fontWeight: 'bold',
                    marginRight: 5
                }
            }),
            placeholder: (provided, _) => ({
                ...provided,
                ':before': {
                    content: `"${properties.label}:"`,
                    textTransform: 'uppercase',
                    display: 'inline-block',
                    fontWeight: 'bold',
                    marginRight: 5
                }
            })
        };

Deoarece există destulă duplicare de cod, aș dori să extrag definiția elementului pseudo before. Am încercat să fac acest lucru astfel:

const beforeStyles = {
    content: `"${properties.label}:"`,
    textTransform: 'uppercase',
    display: 'inline-block',
    fontWeight: 'bold',
    marginRight: 5
};

const customStyles: StylesConfig<any, false> = {
    control: (provided, _) => ({
       ...provided,
       borderColor: '#0682A8',
       color: '#000',
       borderRadius: 21
    }),
    input: (provided, _) => ({
       ...provided,
       ':before': beforeStyles 
    }),
    singleValue: (provided, _) => ({
       ...provided,
       ':before': beforeStyles 
    }),
    placeholder: (provided, _) => ({
       ...provided,
       ':before': beforeStyles 
    })
}

Acest lucru conduce la următoarea eroare:

ERROR in [at-loader] ./src/components/single-select/SingleSelect.tsx:44:13 
    TS2322: Type '(provided: CSSObject, _: InputProps) => { ':focus::before': { content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }; alignContent?: AlignContent | ... 2 more ... | undefined; ... 904 more ...; ":visited"?: CSSObject | undefined; }' is not assignable to type '(base: CSSObject, props: InputProps) => CSSObject'.
  Type '{ ':focus::before': { content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }; alignContent?: Property.AlignContent | (Property.AlignContent | undefined)[] | Property.AlignContent[] | undefined; ... 904 more ...; ":visited"?: CSSObject | undefined; }' is not assignable to type 'CSSObject'.
    Property '':focus::before'' is incompatible with index signature.
      Type '{ content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }' is not assignable to type 'CSSInterpolation'.
        Type '{ content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }' is not assignable to type 'CSSObject'.

Nu pot nici să import, nici să folosesc CSSObject sau CSSInterpolation pentru că nu pot găsi de unde ar trebui importate. (Autocompletarea mea nu sugerează nimic nici ea)

const beforeStyles: CSSInterpolation = {
    content: `"${properties.label}:"`,
    textTransform: 'uppercase',
    display: 'inline-block',
    fontWeight: 'bold',
     marginRight: 5
};

Singurul lucru pe care am putut să-l găsesc au fost CSSProperties, dar când le folosesc astfel:

const beforeStyles: CSSProperties= {
    content: `"${properties.label}:"`,
    textTransform: 'uppercase',
    display: 'inline-block',
    fontWeight: 'bold',
     marginRight: 5
};

Primește eroarea care afirmă că CSSProperties nu poate fi convertit la CSSObject.

Pot să import clasa CSSProperties din react, dar nu este sugerată nicio declarație de import dacă vreau să creez ceva ca un CSSObject.

Ce fac greșit? Cum pot să extrag părți din stilurile mele?

------- Actualizare după sugestia unui răspuns

Am încercat să import CSSObject din @emotion/serialize, dar am primit o eroare conform căreia CSSObject este un spațiu de nume și nu trebuie utilizat ca tip.

ERROR in [at-loader] ./src/components/single-select/SingleSelect.tsx:28:29 TS2709: Cannot use namespace 'CSSObject' as a type.