styled-components

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

                        function ThemeProvider

                        ThemeProvider: (props: Props) => 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) => 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>
                                                                  ): 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 | HTMLElement;
                                                                                                                        }>;

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