Options
All
  • Public
  • Public/Protected
  • All
Menu

tsstyled

Index

Type aliases

Styled

Styled<TTheme>: { global: StyledGlobalTemplate<TTheme> }

Type parameters

  • TTheme: Record<string, unknown> | undefined

Type declaration

    • <TComponent>(component: TComponent, displayName?: string): StyledTemplate<ComponentPropsWithRef<TComponent>, TTheme>
    • Create a styled component.

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

      Type parameters

      • TComponent: keyof IntrinsicElements | JSXElementConstructor<any>

      Parameters

      • component: TComponent
      • Optional displayName: string

      Returns StyledTemplate<ComponentPropsWithRef<TComponent>, TTheme>

  • global: StyledGlobalTemplate<TTheme>

    Create a global style component.

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

StyledComponent

StyledComponent<TProps>: ForwardRefExoticComponent<TProps> & { propDefaults?: Partial<TProps>; selector: string }

Type parameters

  • TProps: Record<string, unknown> = {}

StyledGlobalComponent

StyledGlobalComponent<TProps>: ComponentType<TProps> & { propDefaults?: Partial<TProps> }

Type parameters

  • TProps

ThemeProviderProps

ThemeProviderProps<TTheme>: { children?: ReactNode; value: Partial<TTheme> | ((current: TTheme) => Partial<TTheme>) }

Type parameters

  • TTheme: Record<string, unknown>

Type declaration

  • Optional children?: ReactNode
  • value: Partial<TTheme> | ((current: TTheme) => Partial<TTheme>)

Functions

createStyled

  • createStyled<TTheme>(useTheme?: () => TTheme): Styled<TTheme>
  • Create a styled function/namespace, with an optional theme.

    const styled = createStyled();
    const styled = createStyled(useTheme);

    Once created, use the API as follows.

    const Styled = styled('div')``;
    const Styled = styled('div')<ExtraProps>``;
    const Global = styled.global``;
    const Global = styled.global<ExtraProps>``;

    Type parameters

    • TTheme: undefined | Record<string, unknown>

    Parameters

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

    Returns Styled<TTheme>

createTheme

  • createTheme<TTheme>(value: TTheme, providerDisplayName?: string): [useTheme: () => TTheme, ThemeProvider: ComponentType<ThemeProviderProps<TTheme>>]
  • Create a theme hook and provider component.

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

    Use the theme in a styled component.

    const Styled = styled('div', () => ({ theme: useTheme() })`
    color: ${(props) => props.theme.color};
    `;

    Use the theme provider to override theme values. Using the provider isn't necessary if you just want to use the default theme values.

    <ThemeProvider value={{ color: 'blue' }}>
    <StyledDiv />
    </ThemeProvider>

    Type parameters

    • TTheme: Record<string, unknown>

    Parameters

    • value: TTheme
    • providerDisplayName: string = ''

    Returns [useTheme: () => TTheme, ThemeProvider: ComponentType<ThemeProviderProps<TTheme>>]

css

  • css<TProps>(template: TemplateStringsArray, ...values: StyledTemplateValues<TProps, undefined>): StyledMixin<TProps>
  • Create a style helper (AKA: mixin) function.

    const helperFunction = css``;
    const helperFunction = css<Props>``;

    Type parameters

    • TProps: Record<string, unknown>

    Parameters

    • template: TemplateStringsArray
    • Rest ...values: StyledTemplateValues<TProps, undefined>

    Returns StyledMixin<TProps>

Const 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 a string containing all the <style> elements which have been generated during SSR or testing.

    const appHtml = renderToString(<App />);
    const stylesHtml = renderStylesToString();

    Note: This will reset and clear all previously mounted styles.

    Returns string

Generated using TypeDoc