Usando mecanografiado y reaccionar aquí.
const dib = 'display: inline-block;'
export const FaGit = () => <i className="fa-brands fa-github"></i>
dib export const GitIcon = styled(FaGit)(dib)
TS2769: No overload matches this call. Overload 1 of 3, '(first: TemplateStringsArray): StyledComponent<() => Element, any, {}, never>', gave the following error. Argument of type 'string' is not assignable to parameter of type 'TemplateStringsArray'. Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemeProps<any>>, ...rest: Interpolation<ThemeProps<any>>[]): StyledComponent<...>', gave the following error. Argument of type 'string' is not assignable to parameter of type 'TemplateStringsArray | CSSObject | InterpolationFunction<ThemeProps<any>>'. Overload 3 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<{} & object, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error. Argument of type 'string' is not assignable to parameter of type 'TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<{} & object, any>>'.Entonces, ¿cuál debería ser el tipo de dib o cómo debería verse?
La styled(SomeComp)(...) no toma una string . Toma un TemplateStringsArray . Si bien esto puede parecer una cadena, en realidad es bastante diferente.
Vea este ejemplo de patio de recreo para ver cómo podría funcionar una función de plantilla de este tipo:
function template(values: TemplateStringsArray, ...keys: any[]) { console.log(typeof values, values, keys) } const dib = 'display: inline-block;' // <= string const dib2 = `display: inline-block;` // <= still a string template(dib) // error... function does not take a string template(dib2) // still an error template`hello ${1} world` // working! this isn't a string, it's a tagged template template`${dib}` // how you might get your string into a sc templateAparte, la documentación de los componentes con estilo brinda los siguientes consejos sobre el estilo de los componentes de React:
Si usa la notación con estilo (MyComponent) y MyComponent no representa la propiedad className pasada, no se aplicará ningún estilo. Para evitar este problema, asegúrese de que su componente adjunte el className pasado a un nodo DOM
... entonces, a menos que pase la propiedad className:string al elemento HTML, su componente FaGit no responderá a los componentes con estilo.
Podrías hacerlo así:
export const FaGit: React.FC<{className?: string}> = ({className}) => <i className={`fa-brands fa-github ${className ?? ''}`}></i>Poniendo todo esto en conjunto, usted debería ser capaz de:
export const GitIcon = styled(FaGit)`${dib}`;