styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

https://styled-components.com

Channels

# stylelint-processor

Team

[TypeScript] How to extract the prop types of a CSS util/mixin?

June 23, 2021 at 6:35pm

Eric Gratta

@eric-gratta

[TypeScript] How to extract the prop types of a CSS util/mixin?

June 23, 2021 at 6:35pm

Looking for a way to get the prop types not of a component but a CSS util, e.g.:

const Mixin = styled.css<{ disabled?: boolean }>`
  ... styles here ...
`;

And then the component that uses it (PropType is the thing I'm looking for. React.Component<...> doesn't work here because Mixin is not a component, and TypeScript's native Parameters<...> doesn't work because Mixin is also not a function):

const Component = styled.div<PropType<Mixin>>`
   ${Mixin}
`;

July 1, 2021 at 9:10pm

Haseeb Ahmad@haseeb-ahmad

9:10pm

Not sure I understand this correctly, but how about exporting and reusing the type for the Css Mixin

export type MixinType = {disabled?: boolean}
const Mixin = styled.css<MixinType>`...styles`

And then in the component

type ComponentProps = { ...types of Component } & MixinType
const Component = styled.div<ComponentProps>`${Mixin}`

Edited