styled-components

styled-components

Version 6.4.1
Published 5 days ago
2 MB
4 dependencies
MIT license

Install

npm i styled-components

yarn add styled-components

pnpm add styled-components

Overview

Fast, expressive styling for React.

Index

Variables

variable styled

const styled: (<Target extends unknown, InjectedProps extends object = BaseObject>(
    tag: Target
) => StyledInstance<
    'web',
    Target,
    Target extends any ? any : InjectedProps,
    BaseObject,
    never
>) & {
    symbol: StyledInstance<
        'web',
        'symbol',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    object: StyledInstance<
        'web',
        'object',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    a: StyledInstance<'web', 'a', React.JSX.IntrinsicElements, BaseObject, never>;
    abbr: StyledInstance<
        'web',
        'abbr',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    address: StyledInstance<
        'web',
        'address',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    area: StyledInstance<
        'web',
        'area',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    article: StyledInstance<
        'web',
        'article',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    aside: StyledInstance<
        'web',
        'aside',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    audio: StyledInstance<
        'web',
        'audio',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    b: StyledInstance<'web', 'b', React.JSX.IntrinsicElements, BaseObject, never>;
    bdi: StyledInstance<
        'web',
        'bdi',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    bdo: StyledInstance<
        'web',
        'bdo',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    blockquote: StyledInstance<
        'web',
        'blockquote',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    body: StyledInstance<
        'web',
        'body',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    button: StyledInstance<
        'web',
        'button',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    br: StyledInstance<'web', 'br', React.JSX.IntrinsicElements, BaseObject, never>;
    canvas: StyledInstance<
        'web',
        'canvas',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    caption: StyledInstance<
        'web',
        'caption',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    cite: StyledInstance<
        'web',
        'cite',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    code: StyledInstance<
        'web',
        'code',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    col: StyledInstance<
        'web',
        'col',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    colgroup: StyledInstance<
        'web',
        'colgroup',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    data: StyledInstance<
        'web',
        'data',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    datalist: StyledInstance<
        'web',
        'datalist',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    dd: StyledInstance<'web', 'dd', React.JSX.IntrinsicElements, BaseObject, never>;
    del: StyledInstance<
        'web',
        'del',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    details: StyledInstance<
        'web',
        'details',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    dfn: StyledInstance<
        'web',
        'dfn',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    dialog: StyledInstance<
        'web',
        'dialog',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    div: StyledInstance<
        'web',
        'div',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    dl: StyledInstance<'web', 'dl', React.JSX.IntrinsicElements, BaseObject, never>;
    dt: StyledInstance<'web', 'dt', React.JSX.IntrinsicElements, BaseObject, never>;
    em: StyledInstance<'web', 'em', React.JSX.IntrinsicElements, BaseObject, never>;
    embed: StyledInstance<
        'web',
        'embed',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    fieldset: StyledInstance<
        'web',
        'fieldset',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    figcaption: StyledInstance<
        'web',
        'figcaption',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    figure: StyledInstance<
        'web',
        'figure',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    footer: StyledInstance<
        'web',
        'footer',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    form: StyledInstance<
        'web',
        'form',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    h1: StyledInstance<'web', 'h1', React.JSX.IntrinsicElements, BaseObject, never>;
    h2: StyledInstance<'web', 'h2', React.JSX.IntrinsicElements, BaseObject, never>;
    h3: StyledInstance<'web', 'h3', React.JSX.IntrinsicElements, BaseObject, never>;
    h4: StyledInstance<'web', 'h4', React.JSX.IntrinsicElements, BaseObject, never>;
    h5: StyledInstance<'web', 'h5', React.JSX.IntrinsicElements, BaseObject, never>;
    h6: StyledInstance<'web', 'h6', React.JSX.IntrinsicElements, BaseObject, never>;
    header: StyledInstance<
        'web',
        'header',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    hgroup: StyledInstance<
        'web',
        'hgroup',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    hr: StyledInstance<'web', 'hr', React.JSX.IntrinsicElements, BaseObject, never>;
    html: StyledInstance<
        'web',
        'html',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    i: StyledInstance<'web', 'i', React.JSX.IntrinsicElements, BaseObject, never>;
    iframe: StyledInstance<
        'web',
        'iframe',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    img: StyledInstance<
        'web',
        'img',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    input: StyledInstance<
        'web',
        'input',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    ins: StyledInstance<
        'web',
        'ins',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    kbd: StyledInstance<
        'web',
        'kbd',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    label: StyledInstance<
        'web',
        'label',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    legend: StyledInstance<
        'web',
        'legend',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    li: StyledInstance<'web', 'li', React.JSX.IntrinsicElements, BaseObject, never>;
    main: StyledInstance<
        'web',
        'main',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    map: StyledInstance<
        'web',
        'map',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    mark: StyledInstance<
        'web',
        'mark',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    menu: StyledInstance<
        'web',
        'menu',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    meter: StyledInstance<
        'web',
        'meter',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    nav: StyledInstance<
        'web',
        'nav',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    ol: StyledInstance<'web', 'ol', React.JSX.IntrinsicElements, BaseObject, never>;
    optgroup: StyledInstance<
        'web',
        'optgroup',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    option: StyledInstance<
        'web',
        'option',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    output: StyledInstance<
        'web',
        'output',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    p: StyledInstance<'web', 'p', React.JSX.IntrinsicElements, BaseObject, never>;
    picture: StyledInstance<
        'web',
        'picture',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    pre: StyledInstance<
        'web',
        'pre',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    progress: StyledInstance<
        'web',
        'progress',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    q: StyledInstance<'web', 'q', React.JSX.IntrinsicElements, BaseObject, never>;
    rp: StyledInstance<'web', 'rp', React.JSX.IntrinsicElements, BaseObject, never>;
    rt: StyledInstance<'web', 'rt', React.JSX.IntrinsicElements, BaseObject, never>;
    ruby: StyledInstance<
        'web',
        'ruby',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    s: StyledInstance<'web', 's', React.JSX.IntrinsicElements, BaseObject, never>;
    samp: StyledInstance<
        'web',
        'samp',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    search: StyledInstance<
        'web',
        'search',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    section: StyledInstance<
        'web',
        'section',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    select: StyledInstance<
        'web',
        'select',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    slot: StyledInstance<
        'web',
        'slot',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    small: StyledInstance<
        'web',
        'small',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    span: StyledInstance<
        'web',
        'span',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    strong: StyledInstance<
        'web',
        'strong',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    sub: StyledInstance<
        'web',
        'sub',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    summary: StyledInstance<
        'web',
        'summary',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    sup: StyledInstance<
        'web',
        'sup',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    table: StyledInstance<
        'web',
        'table',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    tbody: StyledInstance<
        'web',
        'tbody',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    td: StyledInstance<'web', 'td', React.JSX.IntrinsicElements, BaseObject, never>;
    template: StyledInstance<
        'web',
        'template',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    textarea: StyledInstance<
        'web',
        'textarea',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    tfoot: StyledInstance<
        'web',
        'tfoot',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    th: StyledInstance<'web', 'th', React.JSX.IntrinsicElements, BaseObject, never>;
    thead: StyledInstance<
        'web',
        'thead',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    time: StyledInstance<
        'web',
        'time',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    tr: StyledInstance<'web', 'tr', React.JSX.IntrinsicElements, BaseObject, never>;
    u: StyledInstance<'web', 'u', React.JSX.IntrinsicElements, BaseObject, never>;
    ul: StyledInstance<'web', 'ul', React.JSX.IntrinsicElements, BaseObject, never>;
    var: StyledInstance<
        'web',
        'var',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    video: StyledInstance<
        'web',
        'video',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    wbr: StyledInstance<
        'web',
        'wbr',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    circle: StyledInstance<
        'web',
        'circle',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    clipPath: StyledInstance<
        'web',
        'clipPath',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    defs: StyledInstance<
        'web',
        'defs',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    ellipse: StyledInstance<
        'web',
        'ellipse',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feBlend: StyledInstance<
        'web',
        'feBlend',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feColorMatrix: StyledInstance<
        'web',
        'feColorMatrix',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feComponentTransfer: StyledInstance<
        'web',
        'feComponentTransfer',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feComposite: StyledInstance<
        'web',
        'feComposite',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feConvolveMatrix: StyledInstance<
        'web',
        'feConvolveMatrix',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feDiffuseLighting: StyledInstance<
        'web',
        'feDiffuseLighting',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feDisplacementMap: StyledInstance<
        'web',
        'feDisplacementMap',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feDistantLight: StyledInstance<
        'web',
        'feDistantLight',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feDropShadow: StyledInstance<
        'web',
        'feDropShadow',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feFlood: StyledInstance<
        'web',
        'feFlood',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feFuncA: StyledInstance<
        'web',
        'feFuncA',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feFuncB: StyledInstance<
        'web',
        'feFuncB',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feFuncG: StyledInstance<
        'web',
        'feFuncG',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feFuncR: StyledInstance<
        'web',
        'feFuncR',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feGaussianBlur: StyledInstance<
        'web',
        'feGaussianBlur',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feImage: StyledInstance<
        'web',
        'feImage',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feMerge: StyledInstance<
        'web',
        'feMerge',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feMergeNode: StyledInstance<
        'web',
        'feMergeNode',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feMorphology: StyledInstance<
        'web',
        'feMorphology',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feOffset: StyledInstance<
        'web',
        'feOffset',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    fePointLight: StyledInstance<
        'web',
        'fePointLight',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feSpecularLighting: StyledInstance<
        'web',
        'feSpecularLighting',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feSpotLight: StyledInstance<
        'web',
        'feSpotLight',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feTile: StyledInstance<
        'web',
        'feTile',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    feTurbulence: StyledInstance<
        'web',
        'feTurbulence',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    filter: StyledInstance<
        'web',
        'filter',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    foreignObject: StyledInstance<
        'web',
        'foreignObject',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    g: StyledInstance<'web', 'g', React.JSX.IntrinsicElements, BaseObject, never>;
    image: StyledInstance<
        'web',
        'image',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    line: StyledInstance<
        'web',
        'line',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    linearGradient: StyledInstance<
        'web',
        'linearGradient',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    marker: StyledInstance<
        'web',
        'marker',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    mask: StyledInstance<
        'web',
        'mask',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    path: StyledInstance<
        'web',
        'path',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    pattern: StyledInstance<
        'web',
        'pattern',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    polygon: StyledInstance<
        'web',
        'polygon',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    polyline: StyledInstance<
        'web',
        'polyline',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    radialGradient: StyledInstance<
        'web',
        'radialGradient',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    rect: StyledInstance<
        'web',
        'rect',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    stop: StyledInstance<
        'web',
        'stop',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    svg: StyledInstance<
        'web',
        'svg',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    switch: StyledInstance<
        'web',
        'switch',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    text: StyledInstance<
        'web',
        'text',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    textPath: StyledInstance<
        'web',
        'textPath',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    tspan: StyledInstance<
        'web',
        'tspan',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
    use: StyledInstance<
        'web',
        'use',
        React.JSX.IntrinsicElements,
        BaseObject,
        never
    >;
};

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

Create a component that injects global CSS when mounted. Supports theming and dynamic props.

const GlobalStyle = createGlobalStyle`
  body { margin: 0; font-family: system-ui; }
`;
// Render <GlobalStyle /> at the root of your app

function createTheme

createTheme: <T extends Record<string, any>>(
    defaultTheme: T,
    options?: CreateThemeOptions
) => ThemeContract<T>;

Create a theme backed by CSS custom properties, bridging ThemeProvider and CSS variables.
Returns an object with the same shape as the input theme, but every leaf value is a var(--prefix-*, fallback) CSS string. Use these in styled component templates — they work in both client and RSC contexts.
Mount the returned GlobalStyle component inside your ThemeProvider to emit the CSS variables. When the theme changes (e.g. light → dark), the variables update automatically.
Example 1
const theme = createTheme({ colors: { primary: '#0070f3', text: '#111' }, }); // Root layout (client): <ThemeProvider theme={themes[preset]}> <theme.GlobalStyle /> {children} </ThemeProvider> // Any RSC file: const Card = styled.div` color: ${theme.colors.primary}; // → "var(--sc-colors-primary, #0070f3)" `;

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>>;
};

Tag a CSS template literal for use in styled components, createGlobalStyle, or attrs. Enables interpolation type-checking and shared style blocks.
const truncate = css` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `;

function isStyledComponent

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

Type guard that returns true if the target is a styled component.

function keyframes

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

Define a CSS @keyframes animation with an automatically scoped name.

const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;
const Spinner = styled.div`animation: ${rotate} 1s linear infinite;`;

function StyleSheetManager

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

Configure style injection for descendant styled components (target element, stylis plugins, prop forwarding).

function stylisPluginRSC

stylisPluginRSC: (element: Parameters<Middleware>[0]) => void;

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
) => React.ForwardRefExoticComponent<
    React.PropsWithoutRef<WithThemeOuterProps<T>> & React.RefAttributes<any>
> &
    NonReactStatics<T>;

Higher-order component that injects the current theme as a prop. Prefer useTheme in function components.

Classes

class ServerStyleSheet

class ServerStyleSheet {}

constructor

constructor({ nonce }?: { nonce?: string });

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: NodeJS.ReadableStream | PipeableStream
) => NodeJS.ReadWriteStream;

Interfaces

interface DefaultTheme

interface DefaultTheme extends DefaultThemeAsObject {}

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;
 }
}

interface ExecutionContext

interface ExecutionContext extends ExecutionProps {}

ExecutionProps but with theme narrowed from optional to required.
Note: in RSC environments where ThemeProvider is a no-op, theme will be undefined at runtime.

property theme

theme: DefaultTheme;

interface IStyledComponentFactory

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

call signature

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

interface IStyledStatics

interface IStyledStatics<out R extends Runtime, in out OuterProps extends BaseObject>
    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 Keyframes

interface Keyframes {}

property id

id: string;

property name

name: string;

property rules

rules: string;

interface PolymorphicComponent

interface PolymorphicComponent<
    out R extends Runtime,
    in out BaseProps extends BaseObject
> extends React.ForwardRefExoticComponent<
        BaseProps & {
            as?: StyledTarget<R> | undefined;
            forwardedAs?: StyledTarget<R> | undefined;
        }
    > {}

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>,
    ForwardedAsTarget extends StyledTarget<R> | void = void
>(
    props: PolymorphicComponentProps<
        R,
        BaseProps,
        AsTarget,
        ForwardedAsTarget
    > & {
        as: AsTarget;
    }
): React.JSX.Element;

call signature

<ForwardedAsTarget extends StyledTarget<R>>(
    props: PolymorphicComponentProps<R, BaseProps, void, ForwardedAsTarget> & {
        forwardedAs: ForwardedAsTarget;
    }
): React.JSX.Element;

call signature

(
    props: OverrideStyle<
        NoInfer<FastOmit<BaseProps, keyof ExecutionProps>> &
            FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
                as?: void;
                forwardedAs?: void;
            }
    >
): React.JSX.Element;

interface ShouldForwardProp

interface ShouldForwardProp<R extends Runtime> {}

call signature

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

interface StyledInstance

interface Styled<
    out R extends Runtime,
    out Target extends StyledTarget<R>,
    in out OuterProps extends object,
    out OuterStatics extends object = BaseObject,
    out AttrsKeys extends keyof any = never
> {}

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,
    AttrsKeys | keyof AttrsResult<PrivateAttrsArg>
>;

property withConfig

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

call signature

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

interface StyledObject

interface StyledObject<Props extends BaseObject = 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 BaseObject> {}

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 BaseObject> {}

call signature

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

Type Aliases

type Attrs

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

type CSSKeyframes

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

type CSSObject

type CSSObject<Props extends BaseObject = 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 BaseObject, U extends string | number | symbol> = {
    [K in keyof T as K extends U ? never : K]: T[K];
};

type Interpolation

type Interpolation<Props extends BaseObject> =
    | 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 BaseObject = BaseObject
> = IStyledComponentBase<R, Props> & string;

Intersected with string so styled components can be used as computed property keys in object styles: { [MyComponent]: { ... } }. The conditional R extends 'web' ? string : {} was removed to avoid a type alias with a conditional — type aliases require full structural comparison on every use, while this unconditional intersection is cheaper.

type IStyleSheetContext

type IStyleSheetContext = {
    shouldForwardProp?: ShouldForwardProp<'web'> | undefined;
    styleSheet: StyleSheet;
    stylis: Stringifier;
    /** Preserved for inheritance — inner SSMs that set namespace/vendorPrefixes
     *  but not stylisPlugins can still inherit the parent's plugins. */
    stylisPlugins?: stylis.Middleware[] | undefined;
};

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.
     * When provided, `target` and `nonce` props are ignored (configure them on the sheet directly).
     */
    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.
     *
     * When nested inside another `StyleSheetManager`, omitting this prop inherits
     * the parent's function. Pass `undefined` explicitly or a passthrough function
     * to disable inherited behavior for a subtree.
     */
    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.
     *
     * When nested inside another `StyleSheetManager`, omitting this prop inherits
     * the parent's plugins. Pass an empty array (`[]`) to explicitly disable
     * inherited plugins for a subtree.
     */
    stylisPlugins?: undefined | stylis.Middleware[];
    /**
     * CSP nonce to attach to injected `<style>` tags. Overrides auto-detection
     * from `<meta name="sc-nonce">`, `<meta property="csp-nonce">`, or `__webpack_nonce__`.
     */
    nonce?: undefined | string;
    /**
     * 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 BaseObject,
    AsTarget extends StyledTarget<R> | void,
    ForwardedAsTarget extends StyledTarget<R> | void,
    AsTargetProps extends BaseObject = AsTarget extends KnownTarget
        ? React.ComponentPropsWithRef<AsTarget>
        : {},
    ForwardedAsTargetProps extends BaseObject = ForwardedAsTarget extends KnownTarget
        ? React.ComponentPropsWithRef<ForwardedAsTarget>
        : {}
> = OverrideStyle<
    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 BaseObject = 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 (16)

Dependencies (4)

Dev Dependencies (49)

Peer Dependencies (4)

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 5 days ago.
Package analyzed in 5508 ms.
Missing or incorrect documentation? Open an issue for this package.

styled-components

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable styled

variable StyleSheetConsumer

variable StyleSheetContext

variable ThemeConsumer

variable ThemeContext

variable version

Functions

function createGlobalStyle

function createTheme

Example 1

function css

function isStyledComponent

function keyframes

function StyleSheetManager

function stylisPluginRSC

function ThemeProvider

function useTheme

function withTheme

Classes

class ServerStyleSheet

property getStyleElement

property getStyleTags

property instance

property seal

property sealed

method collectStyles

method interleaveWithNodeStream

Interfaces

interface DefaultTheme

interface ExecutionContext

property theme

interface IStyledComponentFactory

interface IStyledStatics

property componentStyle

property foldedComponentIds

property inlineStyle

property styledComponentId

property target

property warnTooManyClasses

interface Keyframes

property id

property name

property rules

interface PolymorphicComponent

interface ShouldForwardProp

interface StyledInstance

property attrs

property withConfig

interface StyledObject

interface StyledOptions

property attrs

property componentId

property displayName

property parentComponentId

property shouldForwardProp

interface StyleFunction

Type Aliases

type Attrs

type CSSKeyframes

type CSSObject

type CSSProp

type CSSProperties

type CSSPseudos

type DataAttributes

type ExecutionProps

type FastOmit

type Interpolation

type IStyledComponent

type IStyleSheetContext

type IStyleSheetManager