styled-components

styled-components

Version 6.1.13
Published 1 hour ago
1.76 MB
9 dependencies
MIT license

Install

npm i styled-components

yarn add styled-components

pnpm add styled-components

Overview

CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.

Index

Variables

variable styled

const styled: (<Target extends unknown, InjectedProps extends object = BaseObject>(
    tag: Target
) => StyledInstance<
    'web',
    Target,
    Target extends any ? any : InjectedProps,
    BaseObject
>) & {
    object: StyledInstance<
        'web',
        'object',
        React.DetailedHTMLProps<
            React.ObjectHTMLAttributes<HTMLObjectElement>,
            HTMLObjectElement
        >,
        BaseObject
    >;
    g: StyledInstance<'web', 'g', React.SVGProps<SVGGElement>, BaseObject>;
    map: StyledInstance<
        'web',
        'map',
        React.DetailedHTMLProps<
            React.MapHTMLAttributes<HTMLMapElement>,
            HTMLMapElement
        >,
        BaseObject
    >;
    big: StyledInstance<
        'web',
        'big',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    link: StyledInstance<
        'web',
        'link',
        React.DetailedHTMLProps<
            React.LinkHTMLAttributes<HTMLLinkElement>,
            HTMLLinkElement
        >,
        BaseObject
    >;
    small: StyledInstance<
        'web',
        'small',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    sub: StyledInstance<
        'web',
        'sub',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    sup: StyledInstance<
        'web',
        'sup',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    a: StyledInstance<
        'web',
        'a',
        React.DetailedHTMLProps<
            React.AnchorHTMLAttributes<HTMLAnchorElement>,
            HTMLAnchorElement
        >,
        BaseObject
    >;
    abbr: StyledInstance<
        'web',
        'abbr',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    address: StyledInstance<
        'web',
        'address',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    area: StyledInstance<
        'web',
        'area',
        React.DetailedHTMLProps<
            React.AreaHTMLAttributes<HTMLAreaElement>,
            HTMLAreaElement
        >,
        BaseObject
    >;
    article: StyledInstance<
        'web',
        'article',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    aside: StyledInstance<
        'web',
        'aside',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    audio: StyledInstance<
        'web',
        'audio',
        React.DetailedHTMLProps<
            React.AudioHTMLAttributes<HTMLAudioElement>,
            HTMLAudioElement
        >,
        BaseObject
    >;
    b: StyledInstance<
        'web',
        'b',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    base: StyledInstance<
        'web',
        'base',
        React.DetailedHTMLProps<
            React.BaseHTMLAttributes<HTMLBaseElement>,
            HTMLBaseElement
        >,
        BaseObject
    >;
    bdi: StyledInstance<
        'web',
        'bdi',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    bdo: StyledInstance<
        'web',
        'bdo',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    blockquote: StyledInstance<
        'web',
        'blockquote',
        React.DetailedHTMLProps<
            React.BlockquoteHTMLAttributes<HTMLQuoteElement>,
            HTMLQuoteElement
        >,
        BaseObject
    >;
    body: StyledInstance<
        'web',
        'body',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLBodyElement>,
            HTMLBodyElement
        >,
        BaseObject
    >;
    br: StyledInstance<
        'web',
        'br',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>,
        BaseObject
    >;
    button: StyledInstance<
        'web',
        'button',
        React.DetailedHTMLProps<
            React.ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement
        >,
        BaseObject
    >;
    canvas: StyledInstance<
        'web',
        'canvas',
        React.DetailedHTMLProps<
            React.CanvasHTMLAttributes<HTMLCanvasElement>,
            HTMLCanvasElement
        >,
        BaseObject
    >;
    caption: StyledInstance<
        'web',
        'caption',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    cite: StyledInstance<
        'web',
        'cite',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    code: StyledInstance<
        'web',
        'code',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    col: StyledInstance<
        'web',
        'col',
        React.DetailedHTMLProps<
            React.ColHTMLAttributes<HTMLTableColElement>,
            HTMLTableColElement
        >,
        BaseObject
    >;
    colgroup: StyledInstance<
        'web',
        'colgroup',
        React.DetailedHTMLProps<
            React.ColgroupHTMLAttributes<HTMLTableColElement>,
            HTMLTableColElement
        >,
        BaseObject
    >;
    data: StyledInstance<
        'web',
        'data',
        React.DetailedHTMLProps<
            React.DataHTMLAttributes<HTMLDataElement>,
            HTMLDataElement
        >,
        BaseObject
    >;
    datalist: StyledInstance<
        'web',
        'datalist',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLDataListElement>,
            HTMLDataListElement
        >,
        BaseObject
    >;
    dd: StyledInstance<
        'web',
        'dd',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    del: StyledInstance<
        'web',
        'del',
        React.DetailedHTMLProps<
            React.DelHTMLAttributes<HTMLModElement>,
            HTMLModElement
        >,
        BaseObject
    >;
    details: StyledInstance<
        'web',
        'details',
        React.DetailedHTMLProps<
            React.DetailsHTMLAttributes<HTMLDetailsElement>,
            HTMLDetailsElement
        >,
        BaseObject
    >;
    dfn: StyledInstance<
        'web',
        'dfn',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    dialog: StyledInstance<
        'web',
        'dialog',
        React.DetailedHTMLProps<
            React.DialogHTMLAttributes<HTMLDialogElement>,
            HTMLDialogElement
        >,
        BaseObject
    >;
    div: StyledInstance<
        'web',
        'div',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLDivElement>,
            HTMLDivElement
        >,
        BaseObject
    >;
    dl: StyledInstance<
        'web',
        'dl',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLDListElement>,
            HTMLDListElement
        >,
        BaseObject
    >;
    dt: StyledInstance<
        'web',
        'dt',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    em: StyledInstance<
        'web',
        'em',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    embed: StyledInstance<
        'web',
        'embed',
        React.DetailedHTMLProps<
            React.EmbedHTMLAttributes<HTMLEmbedElement>,
            HTMLEmbedElement
        >,
        BaseObject
    >;
    fieldset: StyledInstance<
        'web',
        'fieldset',
        React.DetailedHTMLProps<
            React.FieldsetHTMLAttributes<HTMLFieldSetElement>,
            HTMLFieldSetElement
        >,
        BaseObject
    >;
    figcaption: StyledInstance<
        'web',
        'figcaption',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    figure: StyledInstance<
        'web',
        'figure',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    footer: StyledInstance<
        'web',
        'footer',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    form: StyledInstance<
        'web',
        'form',
        React.DetailedHTMLProps<
            React.FormHTMLAttributes<HTMLFormElement>,
            HTMLFormElement
        >,
        BaseObject
    >;
    h1: StyledInstance<
        'web',
        'h1',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >,
        BaseObject
    >;
    h2: StyledInstance<
        'web',
        'h2',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >,
        BaseObject
    >;
    h3: StyledInstance<
        'web',
        'h3',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >,
        BaseObject
    >;
    h4: StyledInstance<
        'web',
        'h4',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >,
        BaseObject
    >;
    h5: StyledInstance<
        'web',
        'h5',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >,
        BaseObject
    >;
    h6: StyledInstance<
        'web',
        'h6',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >,
        BaseObject
    >;
    header: StyledInstance<
        'web',
        'header',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    hgroup: StyledInstance<
        'web',
        'hgroup',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    hr: StyledInstance<
        'web',
        'hr',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
        BaseObject
    >;
    html: StyledInstance<
        'web',
        'html',
        React.DetailedHTMLProps<
            React.HtmlHTMLAttributes<HTMLHtmlElement>,
            HTMLHtmlElement
        >,
        BaseObject
    >;
    i: StyledInstance<
        'web',
        'i',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    iframe: StyledInstance<
        'web',
        'iframe',
        React.DetailedHTMLProps<
            React.IframeHTMLAttributes<HTMLIFrameElement>,
            HTMLIFrameElement
        >,
        BaseObject
    >;
    img: StyledInstance<
        'web',
        'img',
        React.DetailedHTMLProps<
            React.ImgHTMLAttributes<HTMLImageElement>,
            HTMLImageElement
        >,
        BaseObject
    >;
    input: StyledInstance<
        'web',
        'input',
        React.DetailedHTMLProps<
            React.InputHTMLAttributes<HTMLInputElement>,
            HTMLInputElement
        >,
        BaseObject
    >;
    ins: StyledInstance<
        'web',
        'ins',
        React.DetailedHTMLProps<
            React.InsHTMLAttributes<HTMLModElement>,
            HTMLModElement
        >,
        BaseObject
    >;
    kbd: StyledInstance<
        'web',
        'kbd',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    keygen: StyledInstance<
        'web',
        'keygen',
        React.DetailedHTMLProps<
            React.KeygenHTMLAttributes<HTMLElement>,
            HTMLElement
        >,
        BaseObject
    >;
    label: StyledInstance<
        'web',
        'label',
        React.DetailedHTMLProps<
            React.LabelHTMLAttributes<HTMLLabelElement>,
            HTMLLabelElement
        >,
        BaseObject
    >;
    legend: StyledInstance<
        'web',
        'legend',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLLegendElement>,
            HTMLLegendElement
        >,
        BaseObject
    >;
    li: StyledInstance<
        'web',
        'li',
        React.DetailedHTMLProps<
            React.LiHTMLAttributes<HTMLLIElement>,
            HTMLLIElement
        >,
        BaseObject
    >;
    main: StyledInstance<
        'web',
        'main',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    mark: StyledInstance<
        'web',
        'mark',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    menu: StyledInstance<
        'web',
        'menu',
        React.DetailedHTMLProps<React.MenuHTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    menuitem: StyledInstance<
        'web',
        'menuitem',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    meta: StyledInstance<
        'web',
        'meta',
        React.DetailedHTMLProps<
            React.MetaHTMLAttributes<HTMLMetaElement>,
            HTMLMetaElement
        >,
        BaseObject
    >;
    meter: StyledInstance<
        'web',
        'meter',
        React.DetailedHTMLProps<
            React.MeterHTMLAttributes<HTMLMeterElement>,
            HTMLMeterElement
        >,
        BaseObject
    >;
    nav: StyledInstance<
        'web',
        'nav',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    noscript: StyledInstance<
        'web',
        'noscript',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    ol: StyledInstance<
        'web',
        'ol',
        React.DetailedHTMLProps<
            React.OlHTMLAttributes<HTMLOListElement>,
            HTMLOListElement
        >,
        BaseObject
    >;
    optgroup: StyledInstance<
        'web',
        'optgroup',
        React.DetailedHTMLProps<
            React.OptgroupHTMLAttributes<HTMLOptGroupElement>,
            HTMLOptGroupElement
        >,
        BaseObject
    >;
    option: StyledInstance<
        'web',
        'option',
        React.DetailedHTMLProps<
            React.OptionHTMLAttributes<HTMLOptionElement>,
            HTMLOptionElement
        >,
        BaseObject
    >;
    output: StyledInstance<
        'web',
        'output',
        React.DetailedHTMLProps<
            React.OutputHTMLAttributes<HTMLOutputElement>,
            HTMLOutputElement
        >,
        BaseObject
    >;
    p: StyledInstance<
        'web',
        'p',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLParagraphElement>,
            HTMLParagraphElement
        >,
        BaseObject
    >;
    param: StyledInstance<
        'web',
        'param',
        React.DetailedHTMLProps<
            React.ParamHTMLAttributes<HTMLParamElement>,
            HTMLParamElement
        >,
        BaseObject
    >;
    picture: StyledInstance<
        'web',
        'picture',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    pre: StyledInstance<
        'web',
        'pre',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLPreElement>,
            HTMLPreElement
        >,
        BaseObject
    >;
    progress: StyledInstance<
        'web',
        'progress',
        React.DetailedHTMLProps<
            React.ProgressHTMLAttributes<HTMLProgressElement>,
            HTMLProgressElement
        >,
        BaseObject
    >;
    q: StyledInstance<
        'web',
        'q',
        React.DetailedHTMLProps<
            React.QuoteHTMLAttributes<HTMLQuoteElement>,
            HTMLQuoteElement
        >,
        BaseObject
    >;
    rp: StyledInstance<
        'web',
        'rp',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    rt: StyledInstance<
        'web',
        'rt',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    ruby: StyledInstance<
        'web',
        'ruby',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    s: StyledInstance<
        'web',
        's',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    samp: StyledInstance<
        'web',
        'samp',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    script: StyledInstance<
        'web',
        'script',
        React.DetailedHTMLProps<
            React.ScriptHTMLAttributes<HTMLScriptElement>,
            HTMLScriptElement
        >,
        BaseObject
    >;
    section: StyledInstance<
        'web',
        'section',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    select: StyledInstance<
        'web',
        'select',
        React.DetailedHTMLProps<
            React.SelectHTMLAttributes<HTMLSelectElement>,
            HTMLSelectElement
        >,
        BaseObject
    >;
    source: StyledInstance<
        'web',
        'source',
        React.DetailedHTMLProps<
            React.SourceHTMLAttributes<HTMLSourceElement>,
            HTMLSourceElement
        >,
        BaseObject
    >;
    span: StyledInstance<
        'web',
        'span',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLSpanElement>,
            HTMLSpanElement
        >,
        BaseObject
    >;
    strong: StyledInstance<
        'web',
        'strong',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    style: StyledInstance<
        'web',
        'style',
        React.DetailedHTMLProps<
            React.StyleHTMLAttributes<HTMLStyleElement>,
            HTMLStyleElement
        >,
        BaseObject
    >;
    summary: StyledInstance<
        'web',
        'summary',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    table: StyledInstance<
        'web',
        'table',
        React.DetailedHTMLProps<
            React.TableHTMLAttributes<HTMLTableElement>,
            HTMLTableElement
        >,
        BaseObject
    >;
    tbody: StyledInstance<
        'web',
        'tbody',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLTableSectionElement>,
            HTMLTableSectionElement
        >,
        BaseObject
    >;
    td: StyledInstance<
        'web',
        'td',
        React.DetailedHTMLProps<
            React.TdHTMLAttributes<HTMLTableDataCellElement>,
            HTMLTableDataCellElement
        >,
        BaseObject
    >;
    textarea: StyledInstance<
        'web',
        'textarea',
        React.DetailedHTMLProps<
            React.TextareaHTMLAttributes<HTMLTextAreaElement>,
            HTMLTextAreaElement
        >,
        BaseObject
    >;
    tfoot: StyledInstance<
        'web',
        'tfoot',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLTableSectionElement>,
            HTMLTableSectionElement
        >,
        BaseObject
    >;
    th: StyledInstance<
        'web',
        'th',
        React.DetailedHTMLProps<
            React.ThHTMLAttributes<HTMLTableHeaderCellElement>,
            HTMLTableHeaderCellElement
        >,
        BaseObject
    >;
    thead: StyledInstance<
        'web',
        'thead',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLTableSectionElement>,
            HTMLTableSectionElement
        >,
        BaseObject
    >;
    time: StyledInstance<
        'web',
        'time',
        React.DetailedHTMLProps<
            React.TimeHTMLAttributes<HTMLTimeElement>,
            HTMLTimeElement
        >,
        BaseObject
    >;
    tr: StyledInstance<
        'web',
        'tr',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLTableRowElement>,
            HTMLTableRowElement
        >,
        BaseObject
    >;
    track: StyledInstance<
        'web',
        'track',
        React.DetailedHTMLProps<
            React.TrackHTMLAttributes<HTMLTrackElement>,
            HTMLTrackElement
        >,
        BaseObject
    >;
    u: StyledInstance<
        'web',
        'u',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    ul: StyledInstance<
        'web',
        'ul',
        React.DetailedHTMLProps<
            React.HTMLAttributes<HTMLUListElement>,
            HTMLUListElement
        >,
        BaseObject
    >;
    var: StyledInstance<
        'web',
        'var',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    video: StyledInstance<
        'web',
        'video',
        React.DetailedHTMLProps<
            React.VideoHTMLAttributes<HTMLVideoElement>,
            HTMLVideoElement
        >,
        BaseObject
    >;
    wbr: StyledInstance<
        'web',
        'wbr',
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
        BaseObject
    >;
    svg: StyledInstance<'web', 'svg', React.SVGProps<SVGSVGElement>, BaseObject>;
    circle: StyledInstance<
        'web',
        'circle',
        React.SVGProps<SVGCircleElement>,
        BaseObject
    >;
    clipPath: StyledInstance<
        'web',
        'clipPath',
        React.SVGProps<SVGClipPathElement>,
        BaseObject
    >;
    defs: StyledInstance<'web', 'defs', React.SVGProps<SVGDefsElement>, BaseObject>;
    ellipse: StyledInstance<
        'web',
        'ellipse',
        React.SVGProps<SVGEllipseElement>,
        BaseObject
    >;
    foreignObject: StyledInstance<
        'web',
        'foreignObject',
        React.SVGProps<SVGForeignObjectElement>,
        BaseObject
    >;
    image: StyledInstance<
        'web',
        'image',
        React.SVGProps<SVGImageElement>,
        BaseObject
    >;
    line: StyledInstance<
        'web',
        'line',
        React.SVGLineElementAttributes<SVGLineElement>,
        BaseObject
    >;
    linearGradient: StyledInstance<
        'web',
        'linearGradient',
        React.SVGProps<SVGLinearGradientElement>,
        BaseObject
    >;
    marker: StyledInstance<
        'web',
        'marker',
        React.SVGProps<SVGMarkerElement>,
        BaseObject
    >;
    mask: StyledInstance<'web', 'mask', React.SVGProps<SVGMaskElement>, BaseObject>;
    path: StyledInstance<'web', 'path', React.SVGProps<SVGPathElement>, BaseObject>;
    pattern: StyledInstance<
        'web',
        'pattern',
        React.SVGProps<SVGPatternElement>,
        BaseObject
    >;
    polygon: StyledInstance<
        'web',
        'polygon',
        React.SVGProps<SVGPolygonElement>,
        BaseObject
    >;
    polyline: StyledInstance<
        'web',
        'polyline',
        React.SVGProps<SVGPolylineElement>,
        BaseObject
    >;
    radialGradient: StyledInstance<
        'web',
        'radialGradient',
        React.SVGProps<SVGRadialGradientElement>,
        BaseObject
    >;
    rect: StyledInstance<'web', 'rect', React.SVGProps<SVGRectElement>, BaseObject>;
    stop: StyledInstance<'web', 'stop', React.SVGProps<SVGStopElement>, BaseObject>;
    text: StyledInstance<
        'web',
        'text',
        React.SVGTextElementAttributes<SVGTextElement>,
        BaseObject
    >;
    tspan: StyledInstance<
        'web',
        'tspan',
        React.SVGProps<SVGTSpanElement>,
        BaseObject
    >;
    use: StyledInstance<'web', 'use', React.SVGProps<SVGUseElement>, BaseObject>;
};

variable StyleSheetConsumer

const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;

variable StyleSheetContext

const StyleSheetContext: React.Context<IStyleSheetContext>;

variable ThemeConsumer

const ThemeConsumer: React.Consumer<DefaultTheme>;

variable ThemeContext

const ThemeContext: React.Context<DefaultTheme>;

variable version

const version: string;

Functions

function createGlobalStyle

createGlobalStyle: <Props extends object>(
    strings: Styles<Props>,
    ...interpolations: Array<Interpolation<Props>>
) => React.NamedExoticComponent<ExecutionProps & Props>;

function css

css: {
    (
        styles: Styles<object>,
        ...interpolations: Interpolation<object>[]
    ): RuleSet<object>;
    <Props extends object>(
        styles: Styles<NoInfer<Props>>,
        ...interpolations: Interpolation<NoInfer<Props>>[]
    ): RuleSet<NoInfer<Props>>;
};

function isStyledComponent

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

function keyframes

keyframes: <Props extends object = {}>(
    strings: Styles<Props>,
    ...interpolations: Array<Interpolation<Props>>
) => Keyframes;

function StyleSheetManager

StyleSheetManager: (
    props: React.PropsWithChildren<{
        disableCSSOMInjection?: boolean;
        enableVendorPrefixes?: boolean;
        namespace?: string;
        sheet?: StyleSheet;
        shouldForwardProp?: ShouldForwardProp<'web'>;
        stylisPlugins?: stylis.Middleware[];
        target?: InsertionTarget;
    }>
) => React.JSX.Element;

function ThemeProvider

ThemeProvider: (props: Props) => React.JSX.Element | null;

Provide a theme to an entire react component tree via context

function useTheme

useTheme: () => DefaultTheme;

Returns the current theme (as provided by the closest ancestor ThemeProvider.)
If no ThemeProvider is found, the function will error. If you need access to the theme in an uncertain composition scenario, React.useContext(ThemeContext) will not emit an error if there is no ThemeProvider ancestor.

function withTheme

withTheme: <T extends unknown>(Component: T) => any;

Classes

class ServerStyleSheet

class ServerStyleSheet {}

constructor

constructor();

property getStyleElement

getStyleElement: () => React.JSX.Element[];

property getStyleTags

getStyleTags: () => string;

property instance

instance: StyleSheet;

property seal

seal: () => void;

property sealed

sealed: boolean;

method collectStyles

collectStyles: (children: any) => React.JSX.Element;

method interleaveWithNodeStream

interleaveWithNodeStream: (input: Readable) => streamInternal.Transform;

Interfaces

interface DefaultTheme

interface DefaultTheme {}

Override DefaultTheme to get accurate typings for your project.

// create styled-components.d.ts in your project source
// if it isn't being picked up, check tsconfig compilerOptions.types
import type { CSSProp } from "styled-components";
import Theme from './theme';

type ThemeType = typeof Theme;

declare module "styled-components" {
 export interface DefaultTheme extends ThemeType {}
}

declare module "react" {
 interface DOMAttributes<T> {
   css?: CSSProp;
 }
}

index signature

[key: string]: any;

interface ExecutionContext

interface ExecutionContext extends ExecutionProps {}

ExecutionProps but with theme required.

property theme

theme: DefaultTheme;

interface IStyledComponentFactory

interface IStyledComponentFactory<
    R extends Runtime,
    Target extends StyledTarget<R>,
    OuterProps extends object,
    OuterStatics extends object = BaseObject
> {}

call signature

<Props extends object = BaseObject, Statics extends object = BaseObject>(
    target: Target,
    options: StyledOptions<R, OuterProps & Props>,
    rules: RuleSet<OuterProps & Props>
): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics;

interface IStyledStatics

interface IStyledStatics<R extends Runtime, OuterProps extends object>
    extends CommonStatics<R, OuterProps> {}

property componentStyle

componentStyle: R extends 'web' ? ComponentStyle : never;

property foldedComponentIds

foldedComponentIds: R extends 'web' ? string : never;

property inlineStyle

inlineStyle: R extends 'native'
    ? InstanceType<IInlineStyleConstructor<OuterProps>>
    : never;

property styledComponentId

styledComponentId: R extends 'web' ? string : never;

property target

target: StyledTarget<R>;

property warnTooManyClasses

warnTooManyClasses?:
    | (R extends 'web' ? ReturnType<typeof createWarnTooManyClasses> : never)
    | undefined;

interface PolymorphicComponent

interface PolymorphicComponent<R extends Runtime, BaseProps extends object>
    extends React.ForwardRefExoticComponent<BaseProps> {}

This type forms the signature for a forwardRef-enabled component that accepts the "as" prop to dynamically change the underlying rendered JSX. The interface will automatically attempt to extract props from the given rendering target to get proper typing for any specialized props in the target component.

call signature

<
    AsTarget extends StyledTarget<R> | void = void,
    ForwardedAsTarget extends StyledTarget<R> | void = void
>(
    props: PolymorphicComponentProps<R, BaseProps, AsTarget, ForwardedAsTarget>
): React.JSX.Element;

interface ShouldForwardProp

interface ShouldForwardProp<R extends Runtime> {}

call signature

(prop: string, elementToBeCreated: StyledTarget<R>): boolean;

interface StyledInstance

interface Styled<
    R extends Runtime,
    Target extends StyledTarget<R>,
    OuterProps extends object,
    OuterStatics extends object = BaseObject
> {}

property attrs

attrs: <
    Props extends object = BaseObject,
    PrivateMergedProps extends object = Substitute<OuterProps, Props>,
    PrivateAttrsArg extends Attrs<PrivateMergedProps> = Attrs<PrivateMergedProps>,
    PrivateResolvedTarget extends StyledTarget<R> = AttrsTarget<
        R,
        PrivateAttrsArg,
        Target
    >
>(
    attrs: PrivateAttrsArg
) => Styled<
    R,
    PrivateResolvedTarget,
    PrivateResolvedTarget extends KnownTarget
        ? Substitute<
              Substitute<
                  OuterProps,
                  React.ComponentPropsWithRef<PrivateResolvedTarget>
              >,
              Props
          >
        : PrivateMergedProps,
    OuterStatics
>;

property withConfig

withConfig: (
    config: StyledOptions<R, OuterProps>
) => Styled<R, Target, OuterProps, OuterStatics>;

call signature

<Props extends object = BaseObject, Statics extends object = BaseObject>(
    initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>,
    ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[]
): IStyledComponent<R, Substitute<OuterProps, Props>> &
    OuterStatics &
    Statics &
    (R extends 'web'
        ? Target extends string
            ? {}
            : Omit<Target, keyof React.Component<any>>
        : {});

interface StyledObject

interface StyledObject<Props extends object = BaseObject>
    extends CSSProperties,
        CSSPseudos {}

index signature

[key: string]:
    | StyledObject<Props>
    | string
    | number
    | StyleFunction<Props>
    | RuleSet<any>
    | undefined;

interface StyledOptions

interface StyledOptions<R extends Runtime, Props extends object> {}

property attrs

attrs?: Attrs<Props>[] | undefined;

property componentId

componentId?: (R extends 'web' ? string : never) | undefined;

property displayName

displayName?: string | undefined;

property parentComponentId

parentComponentId?: (R extends 'web' ? string : never) | undefined;

property shouldForwardProp

shouldForwardProp?: ShouldForwardProp<R> | undefined;

interface StyleFunction

interface StyleFunction<Props extends object> {}

call signature

(executionContext: ExecutionContext & Props): Interpolation<Props>;

Type Aliases

type Attrs

type Attrs<Props extends object = BaseObject> =
    | (ExecutionProps & Partial<Props>)
    | ((props: ExecutionContext & Props) => ExecutionProps & Partial<Props>);

type CSSKeyframes

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

type CSSObject

type CSSObject<Props extends object = BaseObject> = StyledObject<Props>;

type CSSProp

type CSSProp = Interpolation<any>;

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.
To enable support for the css prop in TypeScript, create a styled-components.d.ts file in your project source with the following contents:
import type { CSSProp } from "styled-components"; declare module "react" { interface Attributes { css?: CSSProp; } }
In order to get accurate typings for props.theme in css interpolations, see DefaultTheme.

type CSSProperties

type CSSProperties = CSS.Properties<number | (string & {})>;

type CSSPseudos

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

type DataAttributes

type DataAttributes = {
    [key: `data-${string}`]: any;
};

This type is intended for when data attributes are composed via the .attrs API:
styled.div.attrs<DataAttributes>({ 'data-testid': 'foo' })``
Would love to figure out how to support this natively without having to manually compose the type, but haven't figured out a way to do so yet that doesn't cause specificity loss (see test/types.tsx if you attempt to embed DataAttributes directly in the Attrs<> type.)

type ExecutionProps

type ExecutionProps = {
    /**
     * Dynamically adjust the rendered component or HTML tag, e.g.
     * ```
     * const StyledButton = styled.button``
     *
     * <StyledButton as="a" href="/foo">
     *   I'm an anchor now
     * </StyledButton>
     * ```
     */
    as?: KnownTarget | undefined;
    forwardedAs?: KnownTarget | undefined;
    theme?: DefaultTheme | undefined;
};

type FastOmit

type FastOmit<T extends object, U extends string | number | symbol> = {
    [K in keyof T as K extends U ? never : K]: T[K];
};

type Interpolation

type Interpolation<Props extends object> =
    | StyleFunction<Props>
    | StyledObject<Props>
    | TemplateStringsArray
    | string
    | number
    | false
    | undefined
    | null
    | Keyframes
    | StyledComponentBrand
    | RuleSet<Props>
    | Interpolation<Props>[];

type IStyledComponent

type IStyledComponent<
    R extends Runtime,
    Props extends object = BaseObject
> = IStyledComponentBase<R, Props> &
    /**
     * TypeScript doesn't allow using a styled component as a key inside object
     * styles because "A computed property name must be of type 'string', 'number',
     * 'symbol', or 'any'.". The toString() method only exists in the web runtime.
     * This hack intersects the `IStyledComponent` type with the built-in `string`
     * type to keep TSC happy.
     *
     * @example
     *  const H1 = styled.h1({
     *    fontSize: '2rem'
     *  });
     *
     *  const Header = styled.header({
     *    [H1]: {
     *      marginBottom: '1rem'
     *    }
     *  })
     */
    (R extends 'web' ? string : {});

type IStyleSheetContext

type IStyleSheetContext = {
    shouldForwardProp?: ShouldForwardProp<'web'> | undefined;
    styleSheet: StyleSheet;
    stylis: Stringifier;
};

type IStyleSheetManager

type IStyleSheetManager = React.PropsWithChildren<{
    /**
     * If desired, you can pass this prop to disable "speedy" insertion mode, which
     * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).
     * When disabled, rules are inserted as simple text into style blocks.
     */
    disableCSSOMInjection?: undefined | boolean;
    /**
     * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
     * to reduce the weight of CSS on the page.
     */
    enableVendorPrefixes?: undefined | boolean;
    /**
     * Provide an optional selector to be prepended to all generated style rules.
     */
    namespace?: undefined | string;
    /**
     * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
     */
    sheet?: undefined | StyleSheet;
    /**
     * Starting in v6, styled-components no longer does its own prop validation
     * and recommends use of transient props "$prop" to pass style-only props to
     * components. If for some reason you are not able to use transient props, a
     * prop validation function can be provided via `StyleSheetManager`, such as
     * `@emotion/is-prop-valid`.
     *
     * When the return value is `true`, props will be forwarded to the DOM/underlying
     * component. If return value is `false`, the prop will be discarded after styles
     * are calculated.
     *
     * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will
     * override this default.
     */
    shouldForwardProp?: undefined | IStyleSheetContext['shouldForwardProp'];
    /**
     * An array of plugins to be run by stylis (style processor) during compilation.
     * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).
     *
     * \* The plugin(s) must be compatible with stylis v4 or above.
     */
    stylisPlugins?: undefined | stylis.Middleware[];
    /**
     * Provide an alternate DOM node to host generated styles; useful for iframes.
     */
    target?: undefined | InsertionTarget;
}>;

type IStylisContext

type IStylisContext = Stringifier | void;

type LibraryStyled

type LibraryStyled<LibraryProps extends object = BaseObject> = <
    Target extends WebTarget
>(
    tag: Target
) => typeof baseStyled<Target, LibraryProps>;

Use this higher-order type for scenarios where you are wrapping styled and providing extra props as a third-party library.

type PolymorphicComponentProps

type PolymorphicComponentProps<
    R extends Runtime,
    BaseProps extends object,
    AsTarget extends StyledTarget<R> | void,
    ForwardedAsTarget extends StyledTarget<R> | void,
    AsTargetProps extends object = AsTarget extends KnownTarget
        ? React.ComponentPropsWithRef<AsTarget>
        : {},
    ForwardedAsTargetProps extends object = ForwardedAsTarget extends KnownTarget
        ? React.ComponentPropsWithRef<ForwardedAsTarget>
        : {}
> = NoInfer<
    FastOmit<
        Substitute<BaseProps, Substitute<ForwardedAsTargetProps, AsTargetProps>>,
        keyof ExecutionProps
    >
> &
    FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
        as?: AsTarget;
        forwardedAs?: ForwardedAsTarget;
    };

Used by PolymorphicComponent to define prop override cascading order.

type RuleSet

type RuleSet<Props extends object = BaseObject> = Interpolation<Props>[];

type Runtime

type Runtime = 'web' | 'native';

type Styled

type Styled = typeof styled;

This is the type of the styled HOC.

type SupportedHTMLElements

type SupportedHTMLElements = (typeof elements)[number];

type WebTarget

type WebTarget = string | KnownTarget;

Package Files (14)

Dependencies (9)

Dev Dependencies (47)

Peer Dependencies (2)

Badge

To add a badge like this oneto 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/styled-components.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/styled-components)

HTML

<a href="https://www.jsdocs.io/package/styled-components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 second ago.
Package analyzed in 6415 ms.
Missing or incorrect documentation? Open an issue for this package.