Using typescript and react here.
const dib = 'display: inline-block;'
export const FaGit = () => <i className="fa-brands fa-github"></i>
dib stylesexport 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>>'.
And so, what the type of dib should be, or how should it look like?
The styled(SomeComp)(...) function does not take a string. It takes a TemplateStringsArray. While this might look like a string, it's actually quite different.
See this playground example to see how such a tempate function might work:
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 s-c template
As an aside, the styled-components documentation gives the following advice regarding the styling of React components:
If you use the styled(MyComponent) notation and MyComponent does not render the passed-in className prop, then no styles will be applied. To avoid this issue, make sure your component attaches the passed-in className to a DOM node
...so unless you pass down className:string property to the HTML element, your FaGit component will not respond to styled-components.
You could do it like this:
export const FaGit: React.FC<{className?: string}> =
({className}) => <i className={`fa-brands fa-github ${className ?? ''}`}></i>
Putting this altogether, you should be able to:
export const GitIcon = styled(FaGit)`${dib}`;