Options
All
  • Public
  • Public/Protected
  • All
Menu

tsstyled

Index

Type aliases

Functions

Type aliases

StyleMixin

StyleMixin<TProps>: {} extends TProps ? (props?: TProps) => string : (props: TProps) => string

Style mixin functions returned by the {@link Styled.mixin styled.mixin} method.

Type parameters

  • TProps: {}

StyleTaggedTemplateFunction

StyleTaggedTemplateFunction<TProps, TTheme>: <TExtraProps>(template: TemplateStringsArray, ...values: StyleTemplateValues<TExtraProps & TProps, readonly [TTheme]>) => ForwardRefExoticComponent<TExtraProps & TProps>

Type parameters

  • TProps: {}

  • TTheme: {} | undefined

Type declaration

    • <TExtraProps>(template: TemplateStringsArray, ...values: StyleTemplateValues<TExtraProps & TProps, readonly [TTheme]>): ForwardRefExoticComponent<TExtraProps & TProps>

    • Intermediate tagged template function returned by the styled function.

      Type parameters

      • TExtraProps: {} = {}

      Parameters

      • template: TemplateStringsArray
      • Rest ...values: StyleTemplateValues<TExtraProps & TProps, readonly [TTheme]>

      Returns ForwardRefExoticComponent<TExtraProps & TProps>

StyleTemplateValues

StyleTemplateValues<TProps, TArgs>: readonly (StyleTemplateDynamicValue<TProps, TArgs> | number | string | { toString: any } | null | undefined)[]

Values provided as part of a styled template string.

Type parameters

  • TProps: {}

  • TArgs: readonly unknown[] = readonly []

Styled

Styled<TTheme>: { global: any; mixin: any }

Type parameters

  • TTheme: {} | undefined

Type declaration

    • The styled API returned by the createStyled factory function.

      Create's a styled component when called as a function.

      const StyledComponent = styled('div')``;
      const StyledComponent = styled('div')<ExtraProps>``;

      See also:

      • {@link Styled.global styled.global} for creating global styles
      • {@link Styled.mixin styled.mixin} for creating style mixins.

      Type parameters

      • TComponent: JSXElementConstructor<any> | keyof IntrinsicElements

      Parameters

      • component: TComponent
      • Optional displayName: string

      Returns StyleTaggedTemplateFunction<ComponentProps<TComponent>, TTheme>

  • global:function
    • global<TExtraProps>(template: TemplateStringsArray, ...values: StyleTemplateValues<TExtraProps, readonly [TTheme]>): VFC<TExtraProps>

    • Create a global style component.

      const GlobalStyle = styled.global``;
      const GlobalStyle = styled.global<Props>``;

      Type parameters

      • TExtraProps: {} = {}

      Parameters

      • template: TemplateStringsArray
      • Rest ...values: StyleTemplateValues<TExtraProps, readonly [TTheme]>

      Returns VFC<TExtraProps>

  • mixin:function

    • Create a style mixin function.

      A style "mixin" is a function which returns a style string.

      const mixin = styled.mixin``;
      const mixin = styled.mixin<Props>``;

      Type parameters

      • TProps: {}

      Parameters

      Returns StyleMixin<TProps>

Functions

createReactTheme

  • createReactTheme<TTheme>(defaultTheme: TTheme): readonly [useTheme: () => TTheme, ThemeProvider: VFC<ProviderProps<TTheme>>, ThemeContext: Context<TTheme>]

  • Create a React theme hook function and provider component.

    const [useTheme, ThemeProvider, ThemeContext] = createReactTheme({ color: 'red' });

    Type parameters

    • TTheme: {}

    Parameters

    • defaultTheme: TTheme

    Returns readonly [useTheme: () => TTheme, ThemeProvider: VFC<ProviderProps<TTheme>>, ThemeContext: Context<TTheme>]

createStyled

  • createStyled<TTheme>(useTheme?: () => TTheme): Styled<TTheme>

  • Create a styled API, with an optional theme.

    Type parameters

    • TTheme: undefined | {}

    Parameters

    • useTheme: () => TTheme = ...
        • (): TTheme

        • Returns TTheme

    Returns Styled<TTheme>

getId

  • getId(namespace: string): string

  • Get a stable ID string which is safe to use as a CSS identifier.

    const id = getId('namespace');

    Note: When process.env.NODE_ENV is "test" (eg. during Jest testing), this function returns a stable value for the given display name. This value is NOT unique per invocation like it would be at runtime.

    Parameters

    • namespace: string

    Returns string

renderStylesToString

  • renderStylesToString(): string

  • Get all of the <style> elements (generated by TSStyled) as an HTML string.

    Returns string

Generated using TypeDoc