Closed iiroj closed 1 week ago
Slight modification:
interface IStyledComponentBase<R extends Runtime, Props extends object = BaseObject>
extends PolymorphicComponent<R, Props>,
IStyledStatics<R, Props>,
StyledComponentBrand {
defaultProps?: (ExecutionProps & Partial<Props>) | undefined;
toString: () => string;
}
export type IStyledComponent<
R extends Runtime,
Props extends object = BaseObject,
> = IStyledComponentBase<R, Props> & (R extends 'web' ? string : {});
interface
tends to be a lot snappier than type
where you can get away with it
In v6 it's currently not possible to use a styled-component as a key inside object styles to reference its class name, because TypeScript is not happy about:
This PR adds the same hack available in the older
@types/styled-components
package intersecting the mainIStyledComponent
type with thestring
type, available only in the web runtime.Basically, this becomes possible:
I realize this can be worked around by wrapping they key in either:
H1.toString()
String(H1)
${H1}
but in my opinion it's a bit annoying.
Would be willing to accept this PR? What kind of additional testing would this require? Currently I have developed this workaround locally inside a project using TypeScript and
styled-components
. I did not test if it affects the React Native runtime, but it shouldn't.