menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

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

Channels
Team

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

June 23, 2021 at 6:35pm

[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
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