@types/styled-components

  • Version 5.1.13
  • Published
  • 24 kB
  • 3 dependencies
  • MIT license

Install

npm i @types/styled-components
yarn add @types/styled-components
pnpm add @types/styled-components

Overview

TypeScript definitions for styled-components

Index

Variables

variable css

const css: ThemedCssFunction<DefaultTheme>;

    variable styled

    const styled: StyledInterface;

      variable ThemeConsumer

      const ThemeConsumer: any;

        variable ThemeContext

        const ThemeContext: any;

          variable ThemeProvider

          const ThemeProvider: any;

            variable withTheme

            const withTheme: WithThemeFnInterface<DefaultTheme>;

              Functions

              function createGlobalStyle

              createGlobalStyle: <P extends object = {}>(
              first:
              | TemplateStringsArray
              | CSSObject
              | InterpolationFunction<ThemedStyledProps<P, DefaultTheme>>,
              ...interpolations: Array<Interpolation<ThemedStyledProps<P, DefaultTheme>>>
              ) => GlobalStyleComponent<P, DefaultTheme>;

                function isStyledComponent

                isStyledComponent: (target: any) => target is any;

                  function keyframes

                  keyframes: (
                  strings: TemplateStringsArray | CSSKeyframes,
                  ...interpolations: SimpleInterpolation[]
                  ) => Keyframes;

                    function useTheme

                    useTheme: () => DefaultTheme;

                      Classes

                      class ServerStyleSheet

                      class ServerStyleSheet {}

                        property instance

                        readonly instance: ServerStyleSheet;

                          method collectStyles

                          collectStyles: (tree: any) => any;

                            method getStyleElement

                            getStyleElement: () => Array<React.ReactElement<{}>>;

                              method getStyleTags

                              getStyleTags: () => string;

                                method interleaveWithNodeStream

                                interleaveWithNodeStream: (
                                readableStream: NodeJS.ReadableStream
                                ) => NodeJS.ReadableStream;

                                  method seal

                                  seal: () => void;

                                    class StyleSheetManager

                                    class StyleSheetManager extends React.Component<StyleSheetManagerProps> {}

                                      Interfaces

                                      interface BaseThemedCssFunction

                                      interface BaseThemedCssFunction<T extends object> {}

                                        call signature

                                        (
                                        first: TemplateStringsArray | CSSObject,
                                        ...interpolations: SimpleInterpolation[]
                                        ): FlattenSimpleInterpolation;

                                          call signature

                                          (
                                          first:
                                          | TemplateStringsArray
                                          | CSSObject
                                          | InterpolationFunction<ThemedStyledProps<{}, T>>,
                                          ...interpolations: Array<Interpolation<ThemedStyledProps<{}, T>>>
                                          ): FlattenInterpolation<ThemedStyledProps<{}, T>>;

                                            call signature

                                            <P extends object>(
                                            first:
                                            | TemplateStringsArray
                                            | CSSObject
                                            | InterpolationFunction<ThemedStyledProps<P, T>>,
                                            ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
                                            ): FlattenInterpolation<ThemedStyledProps<P, T>>;

                                              interface CSSObject

                                              interface CSSObject extends CSSProperties, CSSPseudos {}

                                                index signature

                                                [key: string]: CSSObject | string | number | undefined;

                                                  interface DefaultTheme

                                                  interface DefaultTheme {}
                                                  • This interface can be augmented by users to add types to styled-components' default theme without needing to reexport ThemedStyledComponentsModule.

                                                  interface GlobalStyleComponent

                                                  interface GlobalStyleComponent<P, T>
                                                  extends React.ComponentClass<ThemedGlobalStyledClassProps<P, T>> {}

                                                    interface Keyframes

                                                    interface Keyframes {}

                                                      method getName

                                                      getName: () => string;

                                                        interface StyledComponentBase

                                                        interface StyledComponentBase<
                                                        C extends string | React.ComponentType<any>,
                                                        T extends object,
                                                        O extends object = {},
                                                        A extends keyof any = never
                                                        > extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {}

                                                          method withComponent

                                                          withComponent: {
                                                          <WithC extends unknown>(component: WithC): StyledComponent<
                                                          StyledComponentInnerComponent<WithC>,
                                                          T,
                                                          O & StyledComponentInnerOtherProps<WithC>,
                                                          A | StyledComponentInnerAttrs<WithC>
                                                          >;
                                                          <WithC extends unknown>(component: WithC): any;
                                                          };

                                                            call signature

                                                            (
                                                            props: StyledComponentProps<C, T, O, A> & {
                                                            as?: never | undefined;
                                                            forwardedAs?: never | undefined;
                                                            }
                                                            ): React.ReactElement<StyledComponentProps<C, T, O, A>>;

                                                              call signature

                                                              <
                                                              AsC extends string | React.ComponentType<any> = C,
                                                              FAsC extends string | React.ComponentType<any> = AsC
                                                              >(
                                                              props: StyledComponentPropsWithAs<AsC, T, O, A, AsC, FAsC>
                                                              ): React.ReactElement<StyledComponentPropsWithAs<AsC, T, O, A, AsC, FAsC>>;

                                                                interface StyledConfig

                                                                interface StyledConfig<O extends object = {}> {}

                                                                  property shouldForwardProp

                                                                  shouldForwardProp?:
                                                                  | ((
                                                                  prop: keyof O,
                                                                  defaultValidatorFn: (prop: keyof O) => boolean
                                                                  ) => boolean)
                                                                  | undefined;

                                                                    interface StyleSheetManagerProps

                                                                    interface StyleSheetManagerProps {}

                                                                      property disableCSSOMInjection

                                                                      disableCSSOMInjection?: boolean | undefined;

                                                                        property disableVendorPrefixes

                                                                        disableVendorPrefixes?: boolean | undefined;

                                                                          property sheet

                                                                          sheet?: ServerStyleSheet | undefined;

                                                                            property stylisPlugins

                                                                            stylisPlugins?: StylisPlugin[] | undefined;

                                                                              property target

                                                                              target?: HTMLElement | undefined;

                                                                                interface ThemedBaseStyledInterface

                                                                                interface ThemedBaseStyledInterface<T extends object>
                                                                                extends ThemedStyledComponentFactories<T> {}

                                                                                  call signature

                                                                                  <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<
                                                                                  StyledComponentInnerComponent<C>,
                                                                                  T,
                                                                                  StyledComponentInnerOtherProps<C>,
                                                                                  StyledComponentInnerAttrs<C>
                                                                                  >;

                                                                                    call signature

                                                                                    <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
                                                                                    // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`
                                                                                    // causes tests to fail in TS 3.1
                                                                                    component: C
                                                                                    ): ThemedStyledFunction<C, T>;

                                                                                      interface ThemedStyledComponentsModule

                                                                                      interface ThemedStyledComponentsModule<T extends object, U extends object = T> {}

                                                                                        property css

                                                                                        css: ThemedCssFunction<T>;

                                                                                          property default

                                                                                          default: ThemedStyledInterface<T>;

                                                                                            property isStyledComponent

                                                                                            isStyledComponent: typeof isStyledComponent;

                                                                                              property ServerStyleSheet

                                                                                              ServerStyleSheet: typeof ServerStyleSheet;

                                                                                                property StyleSheetManager

                                                                                                StyleSheetManager: typeof StyleSheetManager;

                                                                                                  property ThemeConsumer

                                                                                                  ThemeConsumer: React.Consumer<T>;

                                                                                                    property ThemeContext

                                                                                                    ThemeContext: React.Context<T>;

                                                                                                      property ThemeProvider

                                                                                                      ThemeProvider: ThemeProviderComponent<T, U>;

                                                                                                        property withTheme

                                                                                                        withTheme: WithThemeFnInterface<T>;

                                                                                                          method createGlobalStyle

                                                                                                          createGlobalStyle: <P extends object = {}>(
                                                                                                          first:
                                                                                                          | TemplateStringsArray
                                                                                                          | CSSObject
                                                                                                          | InterpolationFunction<ThemedStyledProps<P, T>>,
                                                                                                          ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
                                                                                                          ) => GlobalStyleComponent<P, T>;

                                                                                                            method keyframes

                                                                                                            keyframes: (
                                                                                                            strings: TemplateStringsArray | CSSKeyframes,
                                                                                                            ...interpolations: SimpleInterpolation[]
                                                                                                            ) => Keyframes;

                                                                                                              method useTheme

                                                                                                              useTheme: () => T;

                                                                                                                interface ThemedStyledFunction

                                                                                                                interface ThemedStyledFunction<
                                                                                                                C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
                                                                                                                T extends object,
                                                                                                                O extends object = {},
                                                                                                                A extends keyof any = never
                                                                                                                > extends ThemedStyledFunctionBase<C, T, O, A> {}

                                                                                                                  property withConfig

                                                                                                                  withConfig: <Props extends O = O>(
                                                                                                                  config: StyledConfig<StyledComponentPropsWithRef<C> & Props>
                                                                                                                  ) => ThemedStyledFunction<C, T, Props, A>;

                                                                                                                    method attrs

                                                                                                                    attrs: <
                                                                                                                    U,
                                                                                                                    NewA extends Partial<StyledComponentPropsWithRef<C> & U> & {
                                                                                                                    [others: string]: any;
                                                                                                                    } = {}
                                                                                                                    >(
                                                                                                                    attrs: Attrs<StyledComponentPropsWithRef<C> & U, NewA, T>
                                                                                                                    ) => ThemedStyledFunction<C, T, O & NewA, A | keyof NewA>;

                                                                                                                      interface ThemedStyledFunctionBase

                                                                                                                      interface ThemedStyledFunctionBase<
                                                                                                                      C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
                                                                                                                      T extends object,
                                                                                                                      O extends object = {},
                                                                                                                      A extends keyof any = never
                                                                                                                      > {}

                                                                                                                        call signature

                                                                                                                        (first: TemplateStringsArray): StyledComponent<C, T, O, A>;

                                                                                                                          call signature

                                                                                                                          (
                                                                                                                          first:
                                                                                                                          | TemplateStringsArray
                                                                                                                          | CSSObject
                                                                                                                          | InterpolationFunction<
                                                                                                                          ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>
                                                                                                                          >,
                                                                                                                          ...rest: Array<
                                                                                                                          Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>
                                                                                                                          >
                                                                                                                          ): StyledComponent<C, T, O, A>;

                                                                                                                            call signature

                                                                                                                            <U extends object>(
                                                                                                                            first:
                                                                                                                            | TemplateStringsArray
                                                                                                                            | CSSObject
                                                                                                                            | InterpolationFunction<
                                                                                                                            ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>
                                                                                                                            >,
                                                                                                                            ...rest: Array<
                                                                                                                            Interpolation<
                                                                                                                            ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>
                                                                                                                            >
                                                                                                                            >
                                                                                                                            ): StyledComponent<C, T, O & U, A>;

                                                                                                                              interface ThemeProps

                                                                                                                              interface ThemeProps<T> {}

                                                                                                                                property theme

                                                                                                                                theme: T;

                                                                                                                                  interface ThemeProviderProps

                                                                                                                                  interface ThemeProviderProps<T extends object, U extends object = T> {}

                                                                                                                                    property children

                                                                                                                                    children?: React.ReactNode | undefined;

                                                                                                                                      property theme

                                                                                                                                      theme: T | ((theme: U) => T);

                                                                                                                                        Type Aliases

                                                                                                                                        type AnyStyledComponent

                                                                                                                                        type AnyStyledComponent =
                                                                                                                                        | StyledComponent<any, any, any, any>
                                                                                                                                        | StyledComponent<any, any, any>;

                                                                                                                                          type BaseThemeProviderComponent

                                                                                                                                          type BaseThemeProviderComponent<
                                                                                                                                          T extends object,
                                                                                                                                          U extends object = T
                                                                                                                                          > = React.ComponentClass<ThemeProviderProps<T, U>>;

                                                                                                                                            type BaseWithThemeFnInterface

                                                                                                                                            type BaseWithThemeFnInterface<T extends object> = <
                                                                                                                                            C extends React.ComponentType<any>
                                                                                                                                            >(
                                                                                                                                            // this check is roundabout because the extends clause above would
                                                                                                                                            // not allow any component that accepts _more_ than theme as a prop
                                                                                                                                            component: React.ComponentProps<C> extends { theme?: T | undefined } ? C : never
                                                                                                                                            ) => React.ForwardRefExoticComponent<
                                                                                                                                            WithOptionalTheme<React.ComponentPropsWithRef<C>, T>
                                                                                                                                            >;

                                                                                                                                              type CSSKeyframes

                                                                                                                                              type CSSKeyframes = object & { [key: string]: CSSObject };

                                                                                                                                                type CSSProp

                                                                                                                                                type CSSProp<T = AnyIfEmpty<DefaultTheme>> =
                                                                                                                                                | string
                                                                                                                                                | CSSObject
                                                                                                                                                | FlattenInterpolation<ThemeProps<T>>;
                                                                                                                                                • The CSS prop is not declared by default in the types as it would cause 'css' to be present on the types of anything that uses styled-components indirectly, even if they do not use the babel plugin.

                                                                                                                                                  You can load a default declaration by using writing this special import from a typescript file. This module does not exist in reality, which is why the {} is important:

                                                                                                                                                  import {} from 'styled-components/cssprop'

                                                                                                                                                  Or you can declare your own module augmentation, which allows you to specify the type of Theme:

                                                                                                                                                  import { CSSProp } from 'styled-components'
                                                                                                                                                  interface MyTheme {}
                                                                                                                                                  declare module 'react' {
                                                                                                                                                  interface Attributes {
                                                                                                                                                  css?: CSSProp<MyTheme>
                                                                                                                                                  }
                                                                                                                                                  }

                                                                                                                                                type CSSProperties

                                                                                                                                                type CSSProperties = CSS.Properties<string | number>;

                                                                                                                                                  type CSSPseudos

                                                                                                                                                  type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };

                                                                                                                                                    type FalseyValue

                                                                                                                                                    type FalseyValue = undefined | null | false;

                                                                                                                                                      type FlattenInterpolation

                                                                                                                                                      type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;

                                                                                                                                                        type FlattenSimpleInterpolation

                                                                                                                                                        type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>;

                                                                                                                                                          type Interpolation

                                                                                                                                                          type Interpolation<P> =
                                                                                                                                                          | InterpolationValue
                                                                                                                                                          | InterpolationFunction<P>
                                                                                                                                                          | FlattenInterpolation<P>;

                                                                                                                                                            type InterpolationFunction

                                                                                                                                                            type InterpolationFunction<P> = (props: P) => Interpolation<P>;

                                                                                                                                                              type InterpolationValue

                                                                                                                                                              type InterpolationValue =
                                                                                                                                                              | string
                                                                                                                                                              | number
                                                                                                                                                              | FalseyValue
                                                                                                                                                              | Keyframes
                                                                                                                                                              | StyledComponentInterpolation
                                                                                                                                                              | CSSObject;

                                                                                                                                                                type IntrinsicElementsKeys

                                                                                                                                                                type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;

                                                                                                                                                                  type SimpleInterpolation

                                                                                                                                                                  type SimpleInterpolation = InterpolationValue | FlattenSimpleInterpolation;

                                                                                                                                                                    type StyledComponent

                                                                                                                                                                    type StyledComponent<
                                                                                                                                                                    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
                                                                                                                                                                    T extends object,
                                                                                                                                                                    O extends object = {},
                                                                                                                                                                    A extends keyof any = never
                                                                                                                                                                    > = // the "string" allows this to be used as an object key
                                                                                                                                                                    // I really want to avoid this if possible but it's the only way to use nesting with object styles...
                                                                                                                                                                    string &
                                                                                                                                                                    StyledComponentBase<C, T, O, A> &
                                                                                                                                                                    hoistNonReactStatics.NonReactStatics<
                                                                                                                                                                    C extends React.ComponentType<any> ? C : never
                                                                                                                                                                    >;

                                                                                                                                                                      type StyledComponentInnerAttrs

                                                                                                                                                                      type StyledComponentInnerAttrs<
                                                                                                                                                                      C extends AnyStyledComponent
                                                                                                                                                                      > = C extends StyledComponent<any, any, any, infer A> ? A : never;

                                                                                                                                                                        type StyledComponentInnerComponent

                                                                                                                                                                        type StyledComponentInnerComponent<
                                                                                                                                                                        C extends React.ComponentType<any>
                                                                                                                                                                        > = C extends StyledComponent<infer I, any, any, any>
                                                                                                                                                                        ? I
                                                                                                                                                                        : C extends StyledComponent<infer I, any, any>
                                                                                                                                                                        ? I
                                                                                                                                                                        : C;

                                                                                                                                                                          type StyledComponentInnerOtherProps

                                                                                                                                                                          type StyledComponentInnerOtherProps<
                                                                                                                                                                          C extends AnyStyledComponent
                                                                                                                                                                          > = C extends StyledComponent<any, any, infer O, any>
                                                                                                                                                                          ? O
                                                                                                                                                                          : C extends StyledComponent<any, any, infer O>
                                                                                                                                                                          ? O
                                                                                                                                                                          : never;

                                                                                                                                                                            type StyledComponentProps

                                                                                                                                                                            type StyledComponentProps<
                                                                                                                                                                            // The Component from whose props are derived
                                                                                                                                                                            C extends string | React.ComponentType<any>,
                                                                                                                                                                            // The Theme from the current context
                                                                                                                                                                            T extends object,
                                                                                                                                                                            // The other props added by the template
                                                                                                                                                                            O extends object,
                                                                                                                                                                            // The props that are made optional by .attrs
                                                                                                                                                                            A extends keyof any,
                                                                                                                                                                            // The Component passed with "forwardedAs" prop
                                                                                                                                                                            FAsC extends string | React.ComponentType<any> = C
                                                                                                                                                                            > =
                                                                                                                                                                            // Distribute O if O is a union type
                                                                                                                                                                            O extends object
                                                                                                                                                                            ? WithOptionalTheme<
                                                                                                                                                                            MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>,
                                                                                                                                                                            T
                                                                                                                                                                            > &
                                                                                                                                                                            WithChildrenIfReactComponentClass<C>
                                                                                                                                                                            : never;

                                                                                                                                                                              type StyledComponentPropsWithRef

                                                                                                                                                                              type StyledComponentPropsWithRef<
                                                                                                                                                                              C extends keyof JSX.IntrinsicElements | React.ComponentType<any>
                                                                                                                                                                              > = C extends AnyStyledComponent
                                                                                                                                                                              ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>>
                                                                                                                                                                              : React.ComponentPropsWithRef<C>;

                                                                                                                                                                                type StyledFunction

                                                                                                                                                                                type StyledFunction<
                                                                                                                                                                                C extends keyof JSX.IntrinsicElements | React.ComponentType<any>
                                                                                                                                                                                > = ThemedStyledFunction<C, any>;

                                                                                                                                                                                  type StyledInterface

                                                                                                                                                                                  type StyledInterface = ThemedStyledInterface<DefaultTheme>;

                                                                                                                                                                                    type StyledProps

                                                                                                                                                                                    type StyledProps<P> = ThemedStyledProps<P, AnyIfEmpty<DefaultTheme>>;

                                                                                                                                                                                      type StylisPlugin

                                                                                                                                                                                      type StylisPlugin = (
                                                                                                                                                                                      context: number,
                                                                                                                                                                                      selector: string[],
                                                                                                                                                                                      parent: string[],
                                                                                                                                                                                      content: string,
                                                                                                                                                                                      line: number,
                                                                                                                                                                                      column: number,
                                                                                                                                                                                      length: number
                                                                                                                                                                                      ) => string | void;

                                                                                                                                                                                        type ThemedCssFunction

                                                                                                                                                                                        type ThemedCssFunction<T extends object> = BaseThemedCssFunction<AnyIfEmpty<T>>;

                                                                                                                                                                                          type ThemedGlobalStyledClassProps

                                                                                                                                                                                          type ThemedGlobalStyledClassProps<P, T> = WithOptionalTheme<P, T> & {
                                                                                                                                                                                          suppressMultiMountWarning?: boolean | undefined;
                                                                                                                                                                                          };

                                                                                                                                                                                            type ThemedStyledInterface

                                                                                                                                                                                            type ThemedStyledInterface<T extends object> = ThemedBaseStyledInterface<
                                                                                                                                                                                            AnyIfEmpty<T>
                                                                                                                                                                                            >;

                                                                                                                                                                                              type ThemedStyledProps

                                                                                                                                                                                              type ThemedStyledProps<P, T> = P & ThemeProps<T>;

                                                                                                                                                                                                type ThemeProviderComponent

                                                                                                                                                                                                type ThemeProviderComponent<
                                                                                                                                                                                                T extends object,
                                                                                                                                                                                                U extends object = T
                                                                                                                                                                                                > = BaseThemeProviderComponent<AnyIfEmpty<T>, AnyIfEmpty<U>>;

                                                                                                                                                                                                  type WithThemeFnInterface

                                                                                                                                                                                                  type WithThemeFnInterface<T extends object> = BaseWithThemeFnInterface<
                                                                                                                                                                                                  AnyIfEmpty<T>
                                                                                                                                                                                                  >;

                                                                                                                                                                                                    Namespaces

                                                                                                                                                                                                    namespace global

                                                                                                                                                                                                    namespace global {}

                                                                                                                                                                                                      namespace global.NodeJS

                                                                                                                                                                                                      namespace global.NodeJS {}

                                                                                                                                                                                                        interface ReadableStream

                                                                                                                                                                                                        interface ReadableStream {}

                                                                                                                                                                                                          Package Files (1)

                                                                                                                                                                                                          Dependencies (3)

                                                                                                                                                                                                          Dev Dependencies (0)

                                                                                                                                                                                                          No dev dependencies.

                                                                                                                                                                                                          Peer Dependencies (0)

                                                                                                                                                                                                          No peer dependencies.

                                                                                                                                                                                                          Badge

                                                                                                                                                                                                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/styled-components.

                                                                                                                                                                                                          • Markdown
                                                                                                                                                                                                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/styled-components)
                                                                                                                                                                                                          • HTML
                                                                                                                                                                                                            <a href="https://www.jsdocs.io/package/@types/styled-components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>