@types/styled-system
- Version 5.1.22
- Published
- 64.6 kB
- 1 dependency
- MIT license
Install
npm i @types/styled-system
yarn add @types/styled-system
pnpm add @types/styled-system
Overview
TypeScript definitions for styled-system
Index
Variables
- alignContent
- alignItems
- alignSelf
- background
- backgroundColor
- backgroundImage
- backgroundPosition
- backgroundRepeat
- backgroundSize
- border
- borderBottom
- borderColor
- borderLeft
- borderRadius
- borderRight
- borders
- borderStyle
- borderTop
- borderWidth
- bottom
- boxShadow
- buttonStyle
- color
- colorStyle
- display
- flex
- flexBasis
- flexbox
- flexDirection
- flexGrow
- flexShrink
- flexWrap
- fontFamily
- fontSize
- fontStyle
- fontWeight
- grid
- gridArea
- gridAutoColumns
- gridAutoFlow
- gridAutoRows
- gridColumn
- gridColumnGap
- gridGap
- gridRow
- gridRowGap
- gridTemplateAreas
- gridTemplateColumns
- gridTemplateRows
- height
- justifyContent
- justifyItems
- justifySelf
- layout
- left
- letterSpacing
- lineHeight
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- maxHeight
- maxWidth
- minHeight
- minWidth
- opacity
- order
- overflow
- overflowX
- overflowY
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- position
- right
- shadow
- size
- space
- styles
- textAlign
- textColor
- textShadow
- textStyle
- top
- typography
- verticalAlign
- width
- zIndex
Functions
Interfaces
StylesProps
- alignContent
- alignItems
- alignSelf
- background
- backgroundColor
- backgroundImage
- backgroundPosition
- backgroundRepeat
- backgroundSize
- border
- borderBottom
- borderColor
- borderLeft
- borderRadius
- borderRight
- borders
- borderTop
- bottom
- boxShadow
- buttonStyle
- color
- colorStyle
- display
- flex
- flexBasis
- flexDirection
- flexWrap
- fontFamily
- fontSize
- fontStyle
- fontWeight
- gridArea
- gridAutoColumns
- gridAutoFlow
- gridAutoRows
- gridColumn
- gridColumnGap
- gridGap
- gridRow
- gridRowGap
- gridTemplateAreas
- gridTemplateColumns
- gridTemplateRows
- height
- justifyContent
- justifyItems
- justifySelf
- left
- letterSpacing
- lineHeight
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- maxHeight
- maxWidth
- minHeight
- minWidth
- opacity
- order
- overflow
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- position
- right
- size
- space
- textAlign
- textColor
- textStyle
- top
- verticalAlign
- width
- zIndex
Type Aliases
Variables
variable alignContent
const alignContent: styleFn;
variable alignItems
const alignItems: styleFn;
variable alignSelf
const alignSelf: styleFn;
variable background
const background: styleFn;
variable backgroundColor
const backgroundColor: styleFn;
variable backgroundImage
const backgroundImage: styleFn;
variable backgroundPosition
const backgroundPosition: styleFn;
variable backgroundRepeat
const backgroundRepeat: styleFn;
variable backgroundSize
const backgroundSize: styleFn;
variable border
const border: styleFn;
variable borderBottom
const borderBottom: styleFn;
variable borderColor
const borderColor: styleFn;
variable borderLeft
const borderLeft: styleFn;
variable borderRadius
const borderRadius: styleFn;
variable borderRight
const borderRight: styleFn;
variable borders
const borders: styleFn;
variable borderStyle
const borderStyle: styleFn;
variable borderTop
const borderTop: styleFn;
variable borderWidth
const borderWidth: styleFn;
variable bottom
const bottom: styleFn;
variable boxShadow
const boxShadow: styleFn;
variable buttonStyle
const buttonStyle: styleFn;
variable color
const color: styleFn;
variable colorStyle
const colorStyle: styleFn;
variable display
const display: styleFn;
variable flex
const flex: styleFn;
variable flexBasis
const flexBasis: styleFn;
variable flexbox
const flexbox: styleFn;
variable flexDirection
const flexDirection: styleFn;
variable flexGrow
const flexGrow: styleFn;
variable flexShrink
const flexShrink: styleFn;
variable flexWrap
const flexWrap: styleFn;
variable fontFamily
const fontFamily: styleFn;
variable fontSize
const fontSize: styleFn;
variable fontStyle
const fontStyle: styleFn;
variable fontWeight
const fontWeight: styleFn;
variable grid
const grid: styleFn;
variable gridArea
const gridArea: styleFn;
variable gridAutoColumns
const gridAutoColumns: styleFn;
variable gridAutoFlow
const gridAutoFlow: styleFn;
variable gridAutoRows
const gridAutoRows: styleFn;
variable gridColumn
const gridColumn: styleFn;
variable gridColumnGap
const gridColumnGap: styleFn;
variable gridGap
const gridGap: styleFn;
variable gridRow
const gridRow: styleFn;
variable gridRowGap
const gridRowGap: styleFn;
variable gridTemplateAreas
const gridTemplateAreas: styleFn;
variable gridTemplateColumns
const gridTemplateColumns: styleFn;
variable gridTemplateRows
const gridTemplateRows: styleFn;
variable height
const height: styleFn;
variable justifyContent
const justifyContent: styleFn;
variable justifyItems
const justifyItems: styleFn;
variable justifySelf
const justifySelf: styleFn;
variable layout
const layout: styleFn;
variable left
const left: styleFn;
variable letterSpacing
const letterSpacing: styleFn;
variable lineHeight
const lineHeight: styleFn;
variable margin
const margin: styleFn;
variable marginBottom
const marginBottom: styleFn;
variable marginLeft
const marginLeft: styleFn;
variable marginRight
const marginRight: styleFn;
variable marginTop
const marginTop: styleFn;
variable maxHeight
const maxHeight: styleFn;
variable maxWidth
const maxWidth: styleFn;
variable minHeight
const minHeight: styleFn;
variable minWidth
const minWidth: styleFn;
variable opacity
const opacity: styleFn;
variable order
const order: styleFn;
variable overflow
const overflow: styleFn;
variable overflowX
const overflowX: styleFn;
variable overflowY
const overflowY: styleFn;
variable padding
const padding: styleFn;
variable paddingBottom
const paddingBottom: styleFn;
variable paddingLeft
const paddingLeft: styleFn;
variable paddingRight
const paddingRight: styleFn;
variable paddingTop
const paddingTop: styleFn;
variable position
const position: styleFn;
variable right
const right: styleFn;
variable shadow
const shadow: styleFn;
variable size
const size: styleFn;
variable space
const space: styleFn;
Converts shorthand or longhand margin and padding props to margin and padding CSS declarations
- Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale. - Negative values can be used for negative margins. - Numbers greater than the length of the theme.space array are converted to raw pixel values. - String values are passed as raw CSS values. - Array values are converted into responsive values.
variable styles
const styles: StylesProps;
variable textAlign
const textAlign: styleFn;
variable textColor
const textColor: styleFn;
variable textShadow
const textShadow: styleFn;
variable textStyle
const textStyle: styleFn;
variable top
const top: styleFn;
variable typography
const typography: styleFn;
variable verticalAlign
const verticalAlign: styleFn;
variable width
const width: styleFn;
variable zIndex
const zIndex: styleFn;
Functions
function compose
compose: (...parsers: styleFn[]) => styleFn;
function createParser
createParser: (config: ConfigStyle) => styleFn;
function createStyleFunction
createStyleFunction: (args: ConfigStyle) => styleFn;
function get
get: (obj: any, ...paths: Array<string | number>) => any;
function getPx
getPx: (n: any, scale: any) => string;
Typography
function style
style: <N = string | number, S = Scale>( args: LowLevelStyleFunctionArguments<N, S>) => styleFn;
function system
system: (styleDefinitions: Config) => styleFn;
function variant
variant: <TStyle = object, K extends string = string, TPropName = string>( props: VariantArgs<TStyle, K, TPropName>) => (...args: any[]) => any;
Interfaces
interface AlignContentProps
interface AlignContentProps<ThemeType extends Theme = RequiredTheme> {}
property alignContent
alignContent?: ResponsiveValue<CSS.Property.AlignContent, ThemeType> | undefined;
The CSS align-content property sets how the browser distributes space between and around content items along the cross-axis of a flexbox container, and the main-axis of a grid container.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
interface AlignItemsProps
interface AlignItemsProps<ThemeType extends Theme = RequiredTheme> {}
Flexbox
property alignItems
alignItems?: ResponsiveValue<CSS.Property.AlignItems, ThemeType> | undefined;
The CSS align-items property sets the align-self value on all direct children as a group. The align-self property sets the alignment of an item within its containing block.
In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it controls the alignment of items on the Block Axis within their grid area.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
interface AlignSelfProps
interface AlignSelfProps<ThemeType extends Theme = RequiredTheme> {}
property alignSelf
alignSelf?: ResponsiveValue<CSS.Property.AlignSelf, ThemeType> | undefined;
The align-self CSS property aligns flex items of the current flex line overriding the align-items value.
If any of the item's cross-axis margin is set to auto, then align-self is ignored. In Grid layout align-self aligns the item inside the grid area.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
interface BackgroundColorProps
interface BackgroundColorProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> {}
property backgroundColor
backgroundColor?: ResponsiveValue<TVal, ThemeType> | undefined;
property bg
bg?: ResponsiveValue<TVal, ThemeType> | undefined;
The color utility parses a component's
color
andbg
props and converts them into CSS declarations. By default the raw value of the prop is returned.Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values.
[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
interface BackgroundImageProps
interface BackgroundImageProps<ThemeType extends Theme = RequiredTheme> {}
Background
property backgroundImage
backgroundImage?: | ResponsiveValue<CSS.Property.BackgroundImage, ThemeType> | undefined;
The background-image CSS property sets one or more background images on an element.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
interface BackgroundPositionProps
interface BackgroundPositionProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.BackgroundPosition<TLengthStyledSystem>> {}
property backgroundPosition
backgroundPosition?: ResponsiveValue<TVal, ThemeType> | undefined;
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
interface BackgroundProps
interface BackgroundProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Background<TLengthStyledSystem>> extends BackgroundImageProps<ThemeType>, BackgroundSizeProps<ThemeType>, BackgroundPositionProps<ThemeType>, BackgroundRepeatProps<ThemeType> {}
property background
background?: ResponsiveValue<TVal, ThemeType> | undefined;
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, repeat method, and others.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
interface BackgroundRepeatProps
interface BackgroundRepeatProps<ThemeType extends Theme = RequiredTheme> {}
property backgroundRepeat
backgroundRepeat?: | ResponsiveValue<CSS.Property.BackgroundRepeat, ThemeType> | undefined;
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
interface BackgroundSizeProps
interface BackgroundSizeProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.BackgroundSize<TLengthStyledSystem>> {}
property backgroundSize
backgroundSize?: ResponsiveValue<TVal, ThemeType> | undefined;
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
interface BorderBottomProps
interface BorderBottomProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.BorderBottom<TLengthStyledSystem>> {}
property borderBottom
borderBottom?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-bottom CSS property sets an element's bottom border. It's a shorthand for border-bottom-width, border-bottom-style and border-bottom-color.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom)
interface BorderColorProps
interface BorderColorProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> {}
property borderBottomColor
borderBottomColor?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
property borderColor
borderColor?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-color shorthand CSS property sets the color of all sides of an element's border.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
property borderLeftColor
borderLeftColor?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
property borderRightColor
borderRightColor?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-right-color CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
property borderTopColor
borderTopColor?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
interface BorderLeftProps
interface BorderLeftProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.BorderLeft<TLengthStyledSystem>> {}
property borderLeft
borderLeft?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-left CSS property is a shorthand that sets the values of border-left-width, border-left-style, and border-left-color. These properties describe an element's left border.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
interface BorderProps
interface BorderProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Border<TLengthStyledSystem>> extends BorderWidthProps<ThemeType>, BorderStyleProps<ThemeType>, BorderColorProps<ThemeType>, BorderRadiusProps<ThemeType>, BorderTopProps<ThemeType>, BorderRightProps<ThemeType>, BorderBottomProps<ThemeType>, BorderLeftProps<ThemeType> {}
property border
border?: ResponsiveValue<TVal, ThemeType> | undefined;
The border CSS property sets an element's border. It's a shorthand for border-width, border-style, and border-color.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
property borderX
borderX?: ResponsiveValue<TVal, ThemeType> | undefined;
property borderY
borderY?: ResponsiveValue<TVal, ThemeType> | undefined;
interface BorderRadiusProps
interface BorderRadiusProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'radii', ThemeType>> {}
property borderBottomLeftRadius
borderBottomLeftRadius?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-bottom-left-radius CSS property rounds the bottom-left corner of an element.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
property borderBottomRightRadius
borderBottomRightRadius?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-bottom-right-radius CSS property rounds the bottom-right corner of an element.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
property borderRadius
borderRadius?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
property borderTopLeftRadius
borderTopLeftRadius?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-top-left-radius CSS property rounds the top-left corner of an element.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
property borderTopRightRadius
borderTopRightRadius?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-top-right-radius CSS property rounds the top-right corner of an element.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
interface BorderRightProps
interface BorderRightProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.BorderRight<TLengthStyledSystem>> {}
property borderRight
borderRight?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-right CSS property is a shorthand that sets border-right-width, border-right-style, and border-right-color. These properties set an element's right border.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
interface BordersProps
interface BordersProps<ThemeType extends Theme = RequiredTheme> extends BorderProps<ThemeType>, BorderTopProps<ThemeType>, BorderRightProps<ThemeType>, BorderBottomProps<ThemeType>, BorderLeftProps<ThemeType>, BorderWidthProps<ThemeType>, BorderColorProps<ThemeType>, BorderStyleProps<ThemeType>, BorderRadiusProps<ThemeType> {}
interface BorderStyleProps
interface BorderStyleProps<ThemeType extends Theme = RequiredTheme> {}
property borderBottomStyle
borderBottomStyle?: | ResponsiveValue<CSS.Property.BorderBottomStyle, ThemeType> | undefined;
The border-bottom-style CSS property sets the line style of an element's bottom border.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style)
property borderLeftStyle
borderLeftStyle?: | ResponsiveValue<CSS.Property.BorderLeftStyle, ThemeType> | undefined;
The border-left-style CSS property sets the line style of an element's left border.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
property borderRightStyle
borderRightStyle?: | ResponsiveValue<CSS.Property.BorderRightStyle, ThemeType> | undefined;
The border-right-style CSS property sets the line style of an element's right border.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
property borderStyle
borderStyle?: ResponsiveValue<CSS.Property.BorderStyle, ThemeType> | undefined;
The border-style shorthand CSS property sets the style of all sides of an element's border.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
property borderTopStyle
borderTopStyle?: | ResponsiveValue<CSS.Property.BorderTopStyle, ThemeType> | undefined;
The border-top-style CSS property sets the line style of an element's top border.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style)
interface BorderTopProps
interface BorderTopProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.BorderTop<TLengthStyledSystem>> {}
property borderTop
borderTop?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-top CSS property is a shorthand that sets the values of border-top-width, border-top-style, and border-top-color. These properties describe an element's top border.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top)
interface BorderWidthProps
interface BorderWidthProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'borderWidths', ThemeType>> {}
Borders
property borderBottomWidth
borderBottomWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-bottom-width CSS property sets the width of the bottom border of an element.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width)
property borderLeftWidth
borderLeftWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-left-width CSS property sets the width of the left border of an element.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
property borderRightWidth
borderRightWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-right-width CSS property sets the width of the right border of an element.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
property borderTopWidth
borderTopWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-top-width CSS property sets the width of the top border of an element.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width)
property borderWidth
borderWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The border-width shorthand CSS property sets the width of all sides of an element's border.
[MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)
interface BottomProps
interface BottomProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Bottom<TLengthStyledSystem>> {}
property bottom
bottom?: ResponsiveValue<TVal, ThemeType> | undefined;
The bottom CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
interface BoxShadowProps
interface BoxShadowProps<ThemeType extends Theme = RequiredTheme> {}
property boxShadow
boxShadow?: | ResponsiveValue<CSS.Property.BoxShadow | number, ThemeType> | undefined;
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii and color.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
interface ButtonStyleProps
interface ButtonStyleProps<ThemeType extends Theme = RequiredTheme> {}
property variant
variant?: ResponsiveValue<string, ThemeType> | undefined;
interface ColorProps
interface ColorProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> extends TextColorProps<ThemeType, TVal>, BackgroundColorProps<ThemeType, TVal>, OpacityProps {}
interface ColorStyleProps
interface ColorStyleProps<ThemeType extends Theme = RequiredTheme> {}
property colors
colors?: ResponsiveValue<string, ThemeType> | undefined;
interface Config
interface Config {}
index signature
[customStyleName: string]: ConfigStyle | ConfigFunction | boolean;
Property name exposed for use in components
interface ConfigFunction
interface ConfigFunction {}
property defaults
defaults?: Scale;
A fallback scale object for when there isn't one defined in the
theme
object.
property scale
scale?: string;
A string referencing a key in the
theme
object.
call signature
(value: any, scale: Scale | undefined, props: any): any;
interface ConfigStyle
interface ConfigStyle {}
property defaultScale
defaultScale?: Scale | undefined;
A fallback scale object for when there isn't one defined in the
theme
object.
property properties
properties?: Array<keyof CSS.Properties> | undefined;
An array of multiple properties (e.g.
['marginLeft', 'marginRight']
) to which this style's value will be assigned (overridesproperty
when present).
property property
property?: keyof CSS.Properties | undefined;
The CSS property to use in the returned style object (overridden by
properties
if present).
property scale
scale?: string | undefined;
A string referencing a key in the
theme
object.
property transform
transform?: ((value: any, scale?: Scale) => any) | undefined;
A function to transform the raw value based on the scale.
interface DisplayProps
interface DisplayProps<ThemeType extends Theme = RequiredTheme> {}
Layout
property display
display?: ResponsiveValue<CSS.Property.Display, ThemeType> | undefined;
The display CSS property defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
interface FlexBasisProps
interface FlexBasisProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.FlexBasis<TLengthStyledSystem>> {}
property flexBasis
flexBasis?: ResponsiveValue<TVal, ThemeType> | undefined;
interface FlexboxProps
interface FlexboxProps<ThemeType extends Theme = RequiredTheme> extends AlignItemsProps<ThemeType>, AlignContentProps<ThemeType>, JustifyItemsProps<ThemeType>, JustifyContentProps<ThemeType>, FlexWrapProps<ThemeType>, FlexDirectionProps<ThemeType>, FlexProps<ThemeType>, FlexGrowProps<ThemeType>, FlexShrinkProps<ThemeType>, FlexBasisProps<ThemeType>, JustifySelfProps<ThemeType>, AlignSelfProps<ThemeType>, OrderProps<ThemeType> {}
A convenience style group containing props related to flexbox.
- String values are passed as raw CSS values. - Array values are converted into responsive values.
interface FlexDirectionProps
interface FlexDirectionProps<ThemeType extends Theme = RequiredTheme> {}
property flexDirection
flexDirection?: | ResponsiveValue<CSS.Property.FlexDirection, ThemeType> | undefined;
The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
interface FlexGrowProps
interface FlexGrowProps<ThemeType extends Theme = RequiredTheme> {}
property flexGrow
flexGrow?: ResponsiveValue<CSS.Property.FlexGrow, ThemeType> | undefined;
The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
interface FlexProps
interface FlexProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Flex<TLengthStyledSystem>> {}
property flex
flex?: ResponsiveValue<TVal, ThemeType> | undefined;
The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container. This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
interface FlexShrinkProps
interface FlexShrinkProps<ThemeType extends Theme = RequiredTheme> {}
property flexShrink
flexShrink?: ResponsiveValue<CSS.Property.FlexShrink, ThemeType> | undefined;
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
interface FlexWrapProps
interface FlexWrapProps<ThemeType extends Theme = RequiredTheme> {}
property flexWrap
flexWrap?: ResponsiveValue<CSS.Property.FlexWrap, ThemeType> | undefined;
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
interface FontFamilyProps
interface FontFamilyProps<ThemeType extends Theme = RequiredTheme> {}
property fontFamily
fontFamily?: ResponsiveValue<CSS.Property.FontFamily, ThemeType> | undefined;
interface FontSizeProps
interface FontSizeProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'fontSizes', ThemeType>> {}
property fontSize
fontSize?: ResponsiveValue<TVal, ThemeType> | undefined;
The fontSize utility parses a component's
fontSize
prop and converts it into a CSS font-size declaration.- Numbers from 0-8 (or
theme.fontSizes.length
) are converted to values on the [font size scale](#default-theme). - Numbers greater thantheme.fontSizes.length
are converted to raw pixel values. - String values are passed as raw CSS values. - And array values are converted into responsive values.
interface FontStyleProps
interface FontStyleProps<ThemeType extends Theme = RequiredTheme> {}
property fontStyle
fontStyle?: ResponsiveValue<CSS.Property.FontStyle, ThemeType> | undefined;
The font-style CSS property specifies whether a font should be styled with a normal, italic, or oblique face from its font-family.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)
interface FontWeightProps
interface FontWeightProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'fontWeights', ThemeType>> {}
property fontWeight
fontWeight?: ResponsiveValue<TVal, ThemeType> | undefined;
The font-weight CSS property specifies the weight (or boldness) of the font.
The font weights available to you will depend on the font-family you are using. Some fonts are only available in normal and bold.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
interface GridAreaProps
interface GridAreaProps<ThemeType extends Theme = RequiredTheme> {}
property gridArea
gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType> | undefined;
The grid-area CSS property is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
interface GridAutoColumnsProps
interface GridAutoColumnsProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridAutoColumns<TLengthStyledSystem>> {}
property gridAutoColumns
gridAutoColumns?: ResponsiveValue<TVal, ThemeType> | undefined;
The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
interface GridAutoFlowProps
interface GridAutoFlowProps<ThemeType extends Theme = RequiredTheme> {}
property gridAutoFlow
gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow, ThemeType> | undefined;
The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
interface GridAutoRowsProps
interface GridAutoRowsProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridAutoRows<TLengthStyledSystem>> {}
property gridAutoRows
gridAutoRows?: ResponsiveValue<TVal, ThemeType> | undefined;
The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
interface GridColumnGapProps
interface GridColumnGapProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridColumnGap<TLengthStyledSystem>> {}
property gridColumnGap
gridColumnGap?: ResponsiveValue<TVal, ThemeType> | undefined;
The column-gap CSS property sets the size of the gap (gutter) between an element's columns.
Deprecated
use column-gap
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
interface GridColumnProps
interface GridColumnProps<ThemeType extends Theme = RequiredTheme> {}
property gridColumn
gridColumn?: ResponsiveValue<CSS.Property.GridColumn, ThemeType> | undefined;
The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
interface GridGapProps
interface GridGapProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridGap<TLengthStyledSystem>> {}
Grid Layout
property gridGap
gridGap?: ResponsiveValue<TVal, ThemeType> | undefined;
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
Deprecated
use gap
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
interface GridProps
interface GridProps<ThemeType extends Theme = RequiredTheme> extends GridGapProps<ThemeType>, GridColumnGapProps<ThemeType>, GridRowGapProps<ThemeType>, GridColumnProps<ThemeType>, GridRowProps<ThemeType>, GridAutoFlowProps<ThemeType>, GridAutoColumnsProps<ThemeType>, GridAutoRowsProps<ThemeType>, GridTemplateColumnsProps<ThemeType>, GridTemplateRowsProps<ThemeType>, GridTemplateAreasProps<ThemeType>, GridAreaProps<ThemeType> {}
A convenience style group containing props related to grid.
- String values are passed as raw CSS values. - Array values are converted into responsive values.
interface GridRowGapProps
interface GridRowGapProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridRowGap<TLengthStyledSystem>> {}
property gridRowGap
gridRowGap?: ResponsiveValue<TVal, ThemeType> | undefined;
The row-gap CSS property sets the size of the gap (gutter) between an element's rows.
Deprecated
use row-gap
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
interface GridRowProps
interface GridRowProps<ThemeType extends Theme = RequiredTheme> {}
property gridRow
gridRow?: ResponsiveValue<CSS.Property.GridRow, ThemeType> | undefined;
The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
interface GridTemplateAreasProps
interface GridTemplateAreasProps<ThemeType extends Theme = RequiredTheme> {}
property gridTemplateAreas
gridTemplateAreas?: | ResponsiveValue<CSS.Property.GridTemplateAreas, ThemeType> | undefined;
The grid-template-areas CSS property specifies named grid areas.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
interface GridTemplateColumnsProps
interface GridTemplateColumnsProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridTemplateColumns<TLengthStyledSystem>> {}
property gridTemplateColumns
gridTemplateColumns?: ResponsiveValue<TVal, ThemeType> | undefined;
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
interface GridTemplateRowsProps
interface GridTemplateRowsProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.GridTemplateRows<TLengthStyledSystem>> {}
property gridTemplateRows
gridTemplateRows?: ResponsiveValue<TVal, ThemeType> | undefined;
The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-template-rows)
interface HeightProps
interface HeightProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Height<TLengthStyledSystem>> {}
property height
height?: ResponsiveValue<TVal, ThemeType> | undefined;
The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
interface JustifyContentProps
interface JustifyContentProps<ThemeType extends Theme = RequiredTheme> {}
property justifyContent
justifyContent?: | ResponsiveValue<CSS.Property.JustifyContent, ThemeType> | undefined;
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
interface JustifyItemsProps
interface JustifyItemsProps<ThemeType extends Theme = RequiredTheme> {}
property justifyItems
justifyItems?: ResponsiveValue<CSS.Property.JustifyItems, ThemeType> | undefined;
The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
interface JustifySelfProps
interface JustifySelfProps<ThemeType extends Theme = RequiredTheme> {}
property justifySelf
justifySelf?: ResponsiveValue<CSS.Property.JustifySelf, ThemeType> | undefined;
The CSS justify-self property set the way a box is justified inside its alignment container along the appropriate axis.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
interface LayoutProps
interface LayoutProps<ThemeType extends Theme = RequiredTheme> extends WidthProps<ThemeType>, HeightProps<ThemeType>, MinWidthProps<ThemeType>, MinHeightProps<ThemeType>, MaxWidthProps<ThemeType>, MaxHeightProps<ThemeType>, DisplayProps<ThemeType>, VerticalAlignProps<ThemeType>, SizeProps<ThemeType>, OverflowProps<ThemeType> {}
A convenience style group containing props related to layout such as width, height, and display.
- For length props, Numbers from 0-4 (or the length of theme.sizes) are converted to values on the spacing scale. - For length props, Numbers greater than the length of the theme.sizes array are converted to raw pixel values. - String values are passed as raw CSS values. - Array values are converted into responsive values.
interface LeftProps
interface LeftProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Left<TLengthStyledSystem>> {}
property left
left?: ResponsiveValue<TVal, ThemeType> | undefined;
The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left)
interface LetterSpacingProps
interface LetterSpacingProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'letterSpacings', ThemeType>> {}
property letterSpacing
letterSpacing?: ResponsiveValue<TVal, ThemeType> | undefined;
The letter-spacing CSS property sets the spacing behavior between text characters.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)
interface LineHeightProps
interface LineHeightProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'lineHeights', ThemeType>> {}
property lineHeight
lineHeight?: ResponsiveValue<TVal, ThemeType> | undefined;
The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element.
On non-replaced inline elements, it specifies the height that is used to calculate line box height.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
interface LowLevelStyleFunctionArguments
interface LowLevelStyleFunctionArguments<N, S> {}
property alias
alias?: string | undefined;
property cssProperty
cssProperty?: string | undefined;
property key
key?: string | undefined;
property prop
prop: string;
property properties
properties?: string[] | undefined;
property scale
scale?: S | undefined;
property transformValue
transformValue?: ((n: N, scale?: S) => any) | undefined;
interface MarginBottomProps
interface MarginBottomProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'mb' | 'marginBottom'> {}
interface MarginLeftProps
interface MarginLeftProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'ml' | 'marginLeft'> {}
interface MarginProps
interface MarginProps<ThemeType extends Theme = RequiredTheme> extends Pick< SpaceProps<ThemeType>, | 'm' | 'margin' | 'mt' | 'marginTop' | 'mb' | 'marginBottom' | 'ml' | 'marginLeft' | 'mr' | 'marginRight' | 'my' | 'marginY' | 'mx' | 'marginX' > {}
interface MarginRightProps
interface MarginRightProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'mr' | 'marginRight'> {}
interface MarginTopProps
interface MarginTopProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'mt' | 'marginTop'> {}
interface MaxHeightProps
interface MaxHeightProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.MaxHeight<TLengthStyledSystem>> {}
property maxHeight
maxHeight?: ResponsiveValue<TVal, ThemeType> | undefined;
The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
interface MaxWidthProps
interface MaxWidthProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.MaxWidth<TLengthStyledSystem>> {}
property maxWidth
maxWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)
interface MinHeightProps
interface MinHeightProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.MinHeight<TLengthStyledSystem>> {}
property minHeight
minHeight?: ResponsiveValue<TVal, ThemeType> | undefined;
The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
interface MinWidthProps
interface MinWidthProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.MinWidth<TLengthStyledSystem>> {}
property minWidth
minWidth?: ResponsiveValue<TVal, ThemeType> | undefined;
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)
interface OpacityProps
interface OpacityProps<ThemeType extends Theme = RequiredTheme> {}
property opacity
opacity?: ResponsiveValue<CSS.Property.Opacity, ThemeType> | undefined;
The opacity CSS property sets the transparency of an element or the degree to which content behind an element is visible.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
interface OrderProps
interface OrderProps<ThemeType extends Theme = RequiredTheme> {}
property order
order?: ResponsiveValue<CSS.Property.Order, ThemeType> | undefined;
The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
interface OverflowProps
interface OverflowProps<ThemeType extends Theme = RequiredTheme> {}
property overflow
overflow?: ResponsiveValue<CSS.Property.Overflow, ThemeType> | undefined;
The overflow CSS property sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
property overflowX
overflowX?: ResponsiveValue<CSS.Property.OverflowX, ThemeType> | undefined;
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x)
property overflowY
overflowY?: ResponsiveValue<CSS.Property.OverflowY, ThemeType> | undefined;
The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y)
interface PaddingBottomProps
interface PaddingBottomProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'pb' | 'paddingBottom'> {}
interface PaddingLeftProps
interface PaddingLeftProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'pl' | 'paddingLeft'> {}
interface PaddingProps
interface PaddingProps<ThemeType extends Theme = RequiredTheme> extends Pick< SpaceProps<ThemeType>, | 'p' | 'padding' | 'pt' | 'paddingTop' | 'pb' | 'paddingBottom' | 'pl' | 'paddingLeft' | 'pr' | 'paddingRight' | 'py' | 'paddingY' | 'px' | 'paddingX' > {}
interface PaddingRightProps
interface PaddingRightProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'pr' | 'paddingRight'> {}
interface PaddingTopProps
interface PaddingTopProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'pt' | 'paddingTop'> {}
interface PositionProps
interface PositionProps<ThemeType extends Theme = RequiredTheme> extends ZIndexProps<ThemeType>, TopProps<ThemeType>, RightProps<ThemeType>, BottomProps<ThemeType>, LeftProps<ThemeType> {}
property position
position?: ResponsiveValue<CSS.Property.Position, ThemeType> | undefined;
The position CSS property specifies how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
interface RightProps
interface RightProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Right<TLengthStyledSystem>> {}
property right
right?: ResponsiveValue<TVal, ThemeType> | undefined;
The right CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right)
interface ShadowProps
interface ShadowProps<ThemeType extends Theme = RequiredTheme> extends BoxShadowProps<ThemeType>, TextShadowProps<ThemeType> {}
interface SizeProps
interface SizeProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Height<TLengthStyledSystem>> {}
property size
size?: ResponsiveValue<TVal, ThemeType> | undefined;
interface SpaceProps
interface SpaceProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {}
property m
m?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on top, left, bottom and right
property margin
margin?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on top, left, bottom and right
property marginBottom
marginBottom?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on bottom
property marginLeft
marginLeft?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on left
property marginRight
marginRight?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on right
property marginTop
marginTop?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on top
property marginX
marginX?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on left and right
property marginY
marginY?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on top and bottom
property mb
mb?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on bottom
property ml
ml?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on left
property mr
mr?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on right
property mt
mt?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on top
property mx
mx?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on left and right
property my
my?: ResponsiveValue<TVal, ThemeType> | undefined;
Margin on top and bottom
property p
p?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on top, left, bottom and right
property padding
padding?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on top, left, bottom and right
property paddingBottom
paddingBottom?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on bottom
property paddingLeft
paddingLeft?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on left
property paddingRight
paddingRight?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on right
property paddingTop
paddingTop?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on top
property paddingX
paddingX?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on left and right
property paddingY
paddingY?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on top and bottom
property pb
pb?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on bottom
property pl
pl?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on left
property pr
pr?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on right
property pt
pt?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on top
property px
px?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on left and right
property py
py?: ResponsiveValue<TVal, ThemeType> | undefined;
Padding on top and bottom
interface styleFn
interface styleFn {}
property cache
cache?: object | undefined;
property config
config?: object | undefined;
property propNames
propNames?: string[] | undefined;
call signature
(...args: any[]): any;
interface StylesProps
interface StylesProps {}
property alignContent
alignContent: typeof alignContent;
property alignItems
alignItems: typeof alignItems;
property alignSelf
alignSelf: typeof alignSelf;
property background
background: typeof background;
property backgroundColor
backgroundColor: typeof backgroundColor;
property backgroundImage
backgroundImage: typeof backgroundImage;
property backgroundPosition
backgroundPosition: typeof backgroundPosition;
property backgroundRepeat
backgroundRepeat: typeof backgroundRepeat;
property backgroundSize
backgroundSize: typeof backgroundSize;
property border
border: typeof border;
property borderBottom
borderBottom: typeof borderBottom;
property borderColor
borderColor: typeof borderColor;
property borderLeft
borderLeft: typeof borderLeft;
property borderRadius
borderRadius: typeof borderRadius;
property borderRight
borderRight: typeof borderRight;
property borders
borders: typeof borders;
property borderTop
borderTop: typeof borderTop;
property bottom
bottom: typeof bottom;
property boxShadow
boxShadow: typeof boxShadow;
property buttonStyle
buttonStyle: typeof buttonStyle;
property color
color: typeof color;
property colorStyle
colorStyle: typeof colorStyle;
property display
display: typeof display;
property flex
flex: typeof flex;
property flexBasis
flexBasis: typeof flexBasis;
property flexDirection
flexDirection: typeof flexDirection;
property flexWrap
flexWrap: typeof flexWrap;
property fontFamily
fontFamily: typeof fontFamily;
property fontSize
fontSize: typeof fontSize;
property fontStyle
fontStyle: typeof fontStyle;
property fontWeight
fontWeight: typeof fontWeight;
property gridArea
gridArea: typeof gridArea;
property gridAutoColumns
gridAutoColumns: typeof gridAutoColumns;
property gridAutoFlow
gridAutoFlow: typeof gridAutoFlow;
property gridAutoRows
gridAutoRows: typeof gridAutoRows;
property gridColumn
gridColumn: typeof gridColumn;
property gridColumnGap
gridColumnGap: typeof gridColumnGap;
property gridGap
gridGap: typeof gridGap;
property gridRow
gridRow: typeof gridRow;
property gridRowGap
gridRowGap: typeof gridRowGap;
property gridTemplateAreas
gridTemplateAreas: typeof gridTemplateAreas;
property gridTemplateColumns
gridTemplateColumns: typeof gridTemplateColumns;
property gridTemplateRows
gridTemplateRows: typeof gridTemplateRows;
property height
height: typeof height;
property justifyContent
justifyContent: typeof justifyContent;
property justifyItems
justifyItems: typeof justifyItems;
property justifySelf
justifySelf: typeof justifySelf;
property left
left: typeof left;
property letterSpacing
letterSpacing: typeof letterSpacing;
property lineHeight
lineHeight: typeof lineHeight;
property margin
margin: typeof margin;
property marginBottom
marginBottom: typeof marginBottom;
property marginLeft
marginLeft: typeof marginLeft;
property marginRight
marginRight: typeof marginRight;
property marginTop
marginTop: typeof marginTop;
property maxHeight
maxHeight: typeof maxHeight;
property maxWidth
maxWidth: typeof maxWidth;
property minHeight
minHeight: typeof minHeight;
property minWidth
minWidth: typeof minWidth;
property opacity
opacity: typeof opacity;
property order
order: typeof order;
property overflow
overflow: typeof overflow;
property padding
padding: typeof padding;
property paddingBottom
paddingBottom: typeof paddingBottom;
property paddingLeft
paddingLeft: typeof paddingLeft;
property paddingRight
paddingRight: typeof paddingRight;
property paddingTop
paddingTop: typeof paddingTop;
property position
position: typeof position;
property right
right: typeof right;
property size
size: typeof size;
property space
space: typeof space;
property textAlign
textAlign: typeof textAlign;
property textColor
textColor: typeof textColor;
property textStyle
textStyle: typeof textStyle;
property top
top: typeof top;
property verticalAlign
verticalAlign: typeof verticalAlign;
property width
width: typeof width;
property zIndex
zIndex: typeof zIndex;
interface TextAlignProps
interface TextAlignProps<ThemeType extends Theme = RequiredTheme> {}
property textAlign
textAlign?: ResponsiveValue<CSS.Property.TextAlign, ThemeType> | undefined;
The text-align CSS property specifies the horizontal alignment of an inline or table-cell box.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
interface TextColorProps
interface TextColorProps< ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> {}
Color
property color
color?: ResponsiveValue<TVal, ThemeType> | undefined;
The color utility parses a component's
color
andbg
props and converts them into CSS declarations. By default the raw value of the prop is returned.Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
interface TextShadowProps
interface TextShadowProps<ThemeType extends Theme = RequiredTheme> {}
property textShadow
textShadow?: | ResponsiveValue<CSS.Property.TextShadow | number, ThemeType> | undefined;
The
text-shadow
CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of itsdecorations
. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
interface TextStyleProps
interface TextStyleProps<ThemeType extends Theme = RequiredTheme> {}
property textStyle
textStyle?: ResponsiveValue<string, ThemeType> | undefined;
interface Theme
interface Theme<TLength = TLengthStyledSystem> {}
property borders
borders?: ObjectOrArray<CSS.Property.Border<{}>> | undefined;
property borderStyles
borderStyles?: ObjectOrArray<CSS.Property.Border<{}>> | undefined;
property borderWidths
borderWidths?: ObjectOrArray<CSS.Property.BorderWidth<TLength>> | undefined;
property breakpoints
breakpoints?: ObjectOrArray<number | string | symbol> | undefined;
property buttons
buttons?: ObjectOrArray<CSS.StandardProperties> | undefined;
property colors
colors?: ObjectOrArray<CSS.Property.Color> | undefined;
property colorStyles
colorStyles?: ObjectOrArray<CSS.StandardProperties> | undefined;
property fonts
fonts?: ObjectOrArray<CSS.Property.FontFamily> | undefined;
property fontSizes
fontSizes?: ObjectOrArray<CSS.Property.FontSize<number>> | undefined;
property fontWeights
fontWeights?: ObjectOrArray<CSS.Property.FontWeight> | undefined;
property letterSpacings
letterSpacings?: ObjectOrArray<CSS.Property.LetterSpacing<TLength>> | undefined;
property lineHeights
lineHeights?: ObjectOrArray<CSS.Property.LineHeight<TLength>> | undefined;
property mediaQueries
mediaQueries?: { [size: string]: string } | undefined;
property radii
radii?: ObjectOrArray<CSS.Property.BorderRadius<TLength>> | undefined;
property shadows
shadows?: ObjectOrArray<CSS.Property.BoxShadow> | undefined;
property sizes
sizes?: | ObjectOrArray<CSS.Property.Height<{}> | CSS.Property.Width<{}>> | undefined;
property space
space?: ObjectOrArray<CSS.Property.Margin<number | string>> | undefined;
property textStyles
textStyles?: ObjectOrArray<CSS.StandardProperties> | undefined;
property zIndices
zIndices?: ObjectOrArray<CSS.Property.ZIndex> | undefined;
interface TopProps
interface TopProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Top<TLengthStyledSystem>> {}
property top
top?: ResponsiveValue<TVal, ThemeType> | undefined;
The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top)
interface TypographyProps
interface TypographyProps<ThemeType extends Theme = RequiredTheme> extends FontFamilyProps<ThemeType>, FontSizeProps<ThemeType>, FontWeightProps<ThemeType>, LineHeightProps<ThemeType>, LetterSpacingProps<ThemeType>, FontStyleProps<ThemeType>, TextAlignProps<ThemeType> {}
A convenience style group containing props related to typography such as fontFamily, fontSize, fontWeight, etc.
- String values are passed as raw CSS values. - Array values are converted into responsive values.
interface VariantArgs
interface VariantArgs< TStyle = object, K extends string = string, TPropName = string> {}
interface VerticalAlignProps
interface VerticalAlignProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.VerticalAlign<TLengthStyledSystem>> {}
property verticalAlign
verticalAlign?: ResponsiveValue<TVal, ThemeType> | undefined;
The vertical-align CSS property specifies sets vertical alignment of an inline or table-cell box.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
interface WidthProps
interface WidthProps< ThemeType extends Theme = RequiredTheme, TVal = CSS.Property.Width<TLengthStyledSystem>> {}
property width
width?: ResponsiveValue<TVal, ThemeType> | undefined;
The width utility parses a component's
width
prop and converts it into a CSS width declaration.- Numbers from 0-1 are converted to percentage widths. - Numbers greater than 1 are converted to pixel values. - String values are passed as raw CSS values. - And arrays are converted to responsive width styles.
interface ZIndexProps
interface ZIndexProps<ThemeType extends Theme = RequiredTheme> {}
Position
property zIndex
zIndex?: ResponsiveValue<CSS.Property.ZIndex, ThemeType> | undefined;
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
Type Aliases
type ObjectOrArray
type ObjectOrArray<T, K extends keyof any = keyof any> = | T[] | Record<K, T | Record<K, T> | T[]>;
type RequiredTheme
type RequiredTheme = Required<Theme>;
type ResponsiveValue
type ResponsiveValue<T, ThemeType extends Theme = RequiredTheme> = | T | null | Array<T | null> | { [key in (ThemeValue<'breakpoints', ThemeType> & string) | number]?: T };
type Scale
type Scale = ObjectOrArray<number | string>;
type ThemeValue
type ThemeValue< K extends keyof ThemeType, ThemeType, TVal = any> = ThemeType[K] extends TVal[] ? number : ThemeType[K] extends Record<infer E, TVal> ? E : ThemeType[K] extends ObjectOrArray<infer F> ? F : never;
type TLengthStyledSystem
type TLengthStyledSystem = string | 0 | number;
Package Files (1)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
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/@types/styled-system
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/styled-system)
- HTML<a href="https://www.jsdocs.io/package/@types/styled-system"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 7789 ms. - Missing or incorrect documentation? Open an issue for this package.