StyledSystem

Warning, the StyledSystem components are experimental and in their own package @patternfly/react-styled-system. Use at your own risk!
The PatternFlyThemeProvider component maps CSS to PatternFly global values that can be used with StyledBox, StyledFlex, and StyledText components.
The StyledFlex and StyledText components inherit all the props from StyledBox in addition to their own props.
To apply the PatternFly theme, use at the root of your application.

Examples

Space

The space utility converts shorthand margin and padding props to margin and padding CSS declarations.
Use StyledConstants.space with margin and padding props
Negative values from StyledConstants.space (neg_*) can be used for negative margins.
String values are passed as raw CSS values.
Array values are converted into responsive values.

sets medium margin value

sets negative medium margin value

sets margin auto

Copied to clipboard

Width

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.
Array values are converted into responsive width styles.

width 50%

width 256px

width 4em

width `100%` when less than first breakpoint, and `50%` from the second breakpoint and up

golden ratio: width = height * ratio

Copied to clipboard

Responsive

All props accept arrays as values for responsive styling. You can specify up to 4 array values for each of the breakpoints.

In this example, the Box widths are: 100% below the smallest breakpoint, 50% from the next breakpoint and up, 25% from the next breakpoint and up

This text changes the font size depending on the screen width

This box has different margins depending on the screen width

This box has different paddings depending on the screen width

Copied to clipboard

Flex

Hello World

Left Text

Right Text

Copied to clipboard

Colors

Use color or bg (background) props with StyledConstants.colors to set a color.
Array values are converted into responsive values.

Light text on dark background

Light text on dark transparent background

Copied to clipboard

Typography

Font family: Monospace

Font family: Sans serif

Alignment: Centered text

Alignment: Centered text for smaller viewports, left aligned for wider viewports

Line height: small

Line height: medium

Font weight: light

Font weight: semi bold

Font weight: bold

Font size: small

Font size: medium

Font size: large

Copied to clipboard

Borders

small border

medium border

large border

mixed borders

border radius

border color

Copied to clipboard

Box Shadow

small shadow

medium shadow

large shadow

inset shadow

right and bottom shadow

border radius

border color

Copied to clipboard

Position

Absolute position

higher zIndex

lower zIndex

Copied to clipboard

Override Theme

You can override the theme by supplying a theme object.

If multiple PatternFlyThemeProviders are nested, the theme object of the lower provider will be merged into the ancestor theme.

Original font size

Light text on dark background

Light text on dark transparent background

Overridden font size

Blue text on black background

Yellow text on brown background

Copied to clipboard

PatternFlyThemeProvider Props

The PatternFlyThemeProvider should be higher up the component tree so that it can wrap any styled components in use. Multiple themes can be nested to override the theme if needed. When nesting themes, the theme object will be merged into the ancestor theme.

The PatternFlyThemeProvider component accepts the following props.

Name	Type	Required	Default	Description
theme	object		{ // Array of viewport widths to use for min-width media queries // Need to use values here as it won't work otherwise. Can still be overridden by defining own theme with breakpoints. breakpoints: [ global_breakpoint_sm && global_breakpoint_sm.value, // min-width 576px global_breakpoint_md && global_breakpoint_md.value, // min-width 768px global_breakpoint_lg && global_breakpoint_lg.value, // min-width 992px global_breakpoint_xl && global_breakpoint_xl.value // min-width 1200px ], // Array or Object: Values for borderRadius props radii: { sm: global_BorderRadius_sm && global_BorderRadius_sm.var, lg: global_BorderRadius_lg && global_BorderRadius_lg.var }, // Array of numbers to use as a typographic scale fontSizes: [ global_FontSize_xs && global_FontSize_xs.var, global_FontSize_sm && global_FontSize_sm.var, global_FontSize_md && global_FontSize_md.var, global_FontSize_lg && global_FontSize_lg.var, global_FontSize_xl && global_FontSize_xl.var, global_FontSize_2xl && global_FontSize_2xl.var, global_FontSize_3xl && global_FontSize_3xl.var, global_FontSize_4xl && global_FontSize_4xl.var ], // Array of numbers for use as margin and pixel values // TODO: See if we can use .var instead of .value space: [ global_spacer_xs && global_spacer_xs.value, global_spacer_sm && global_spacer_sm.value, global_spacer_md && global_spacer_md.value, global_spacer_lg && global_spacer_lg.value, global_spacer_xl && global_spacer_xl.value, global_spacer_2xl && global_spacer_2xl.value, global_spacer_3xl && global_spacer_3xl.value ], // Color names that can be used in color, bg, and borderColor props colors: { bg_100: global_BackgroundColor_100 && global_BackgroundColor_100.var, bg_200: global_BackgroundColor_200 && global_BackgroundColor_200.var, bg_300: global_BackgroundColor_300 && global_BackgroundColor_300.var, bg_light_100: global_BackgroundColor_light_100 && global_BackgroundColor_light_100.var, bg_light_200: global_BackgroundColor_light_200 && global_BackgroundColor_light_200.var, bg_light_300: global_BackgroundColor_light_300 && global_BackgroundColor_light_300.var, bg_dark_100: global_BackgroundColor_dark_100 && global_BackgroundColor_dark_100.var, bg_dark_200: global_BackgroundColor_dark_200 && global_BackgroundColor_dark_200.var, bg_dark_transparent_100: global_BackgroundColor_dark_transparent_100 && global_BackgroundColor_dark_transparent_100.var, bg_dark_transparent_200: global_BackgroundColor_dark_transparent_200 && global_BackgroundColor_dark_transparent_200.var, color_100: global_Color_100 && global_Color_100.var, color_200: global_Color_200 && global_Color_200.var, light_100: global_Color_light_100 && global_Color_light_100.var, light_200: global_Color_light_200 && global_Color_light_200.var, dark_100: global_Color_dark_100 && global_Color_dark_100.var, dark_200: global_Color_dark_200 && global_Color_dark_200.var, active_100: global_active_color_100 && global_active_color_100.var, active_200: global_active_color_200 && global_active_color_200.var, active_300: global_active_color_300 && global_active_color_300.var, disabled_100: global_disabled_color_100 && global_disabled_color_100.var, disabled_200: global_disabled_color_200 && global_disabled_color_200.var, primary_100: global_primary_color_100 && global_primary_color_100.var, primary_200: global_primary_color_200 && global_primary_color_200.var, primary_light_100: global_primary_color_light_100 && global_primary_color_light_100.var, primary_dark_100: global_primary_color_dark_100 && global_primary_color_dark_100.var, secondary_100: global_secondary_color_100 && global_secondary_color_100.var, success_100: global_success_color_100 && global_success_color_100.var, success_200: global_success_color_200 && global_success_color_200.var, info_100: global_info_color_100 && global_info_color_100.var, info_200: global_info_color_200 && global_info_color_200.var, warning_100: global_warning_color_100 && global_warning_color_100.var, warning_200: global_warning_color_200 && global_warning_color_200.var, danger_100: global_danger_color_100 && global_danger_color_100.var, danger_200: global_danger_color_200 && global_danger_color_200.var, danger_300: global_danger_color_300 && global_danger_color_300.var, link: global_link_Color && global_link_Color.var, link_hover: global_link_Color_hover && global_link_Color_hover.var, link_light_hover: global_link_Color_light_hover && global_link_Color_light_hover.var, border: global_BorderColor && global_BorderColor.var, border_light: global_BorderColor_light && global_BorderColor_light.var, border_light_200: global_BorderColor_light_200 && global_BorderColor_light_200.var, border_dark: global_BorderColor_dark && global_BorderColor_dark.var }, // Array or Object: Values for the fontFamily prop fonts: { sans_serif: global_FontFamily_sans_serif && global_FontFamily_sans_serif.var, monospace: global_FontFamily_monospace && global_FontFamily_monospace.var }, // Array or Object: Values for fontWeight prop fontWeights: { light: global_FontWeight_light && global_FontWeight_light.var, normal: global_FontWeight_normal && global_FontWeight_normal.var, semi_bold: global_FontWeight_semi_bold && global_FontWeight_semi_bold.var, bold: global_FontWeight_bold && global_FontWeight_bold.var, link: global_link_FontWeight && global_link_FontWeight.var }, // Array or Object: Values for lineHeight prop lineHeights: { sm: global_LineHeight_sm && global_LineHeight_sm.var, md: global_LineHeight_md && global_LineHeight_md.var }, // Array or Object: Values for border props borders: { sm: global_BorderWidth_sm && `${global_BorderWidth_sm.var} solid`, md: global_BorderWidth_md && `${global_BorderWidth_md.var} solid`, lg: global_BorderWidth_lg && `${global_BorderWidth_lg.var} solid` }, // Array or Object: Values for boxShadow prop shadows: { sm: global_BoxShadow_sm && global_BoxShadow_sm.var, sm_left: global_BoxShadow_sm_left && global_BoxShadow_sm_left.var, sm_right: global_BoxShadow_sm_right && global_BoxShadow_sm_right.var, sm_bottom: global_BoxShadow_sm_bottom && global_BoxShadow_sm_bottom.var, sm_top: global_BoxShadow_sm_top && global_BoxShadow_sm_top.var, md: global_BoxShadow_md && global_BoxShadow_md.var, md_left: global_BoxShadow_md_left && global_BoxShadow_md_left.var, md_right: global_BoxShadow_md_right && global_BoxShadow_md_right.var, md_bottom: global_BoxShadow_md_bottom && global_BoxShadow_md_bottom.var, md_top: global_BoxShadow_md_top && global_BoxShadow_md_top.var, lg: global_BoxShadow_lg && global_BoxShadow_lg.var, lg_left: global_BoxShadow_lg_left && global_BoxShadow_lg_left.var, lg_right: global_BoxShadow_lg_right && global_BoxShadow_lg_right.var, lg_bottom: global_BoxShadow_lg_bottom && global_BoxShadow_lg_bottom.var, lg_top: global_BoxShadow_lg_top && global_BoxShadow_lg_top.var, inset: global_BoxShadow_inset && global_BoxShadow_inset.var }, // Custom array zIndices: [ global_ZIndex_xs && global_ZIndex_xs.var, global_ZIndex_sm && global_ZIndex_sm.var, global_ZIndex_md && global_ZIndex_md.var, global_ZIndex_lg && global_ZIndex_lg.var, global_ZIndex_xl && global_ZIndex_xl.var, global_ZIndex_2xl && global_ZIndex_2xl.var ] }	Theme object, defaults to the PatternFly theme
children	element			Anything that can be rendered

StyledBox Props

The StyledBox component accepts the following props.

Name	Type	Default	Description
className	string	''	Additional classes that are passed into the Styled component
children	node	null	Anything that can be rendered inside the Styled component
component	string	'div'	HTML element to render as
m	number \| string \| array	null	margin - Maps with StyledConstants.space
mb	number \| string \| array	null	margin-bottom - Maps with StyledConstants.space
ml	number \| string \| array	null	margin-left - Maps with StyledConstants.space
mr	number \| string \| array	null	margin-right - Maps with StyledConstants.space
mt	number \| string \| array	null	margin-top - Maps with StyledConstants.space
mx	number \| string \| array	null	margin-left and margin-right - Maps with StyledConstants.space
my	number \| string \| array	null	margin-top and margin-bottom - Maps with StyledConstants.space
p	number \| string \| array	null	padding - Maps with StyledConstants.space
pb	number \| string \| array	null	padding-bottom - Maps with StyledConstants.space
pl	number \| string \| array	null	padding-left - Maps with StyledConstants.space
pr	number \| string \| array	null	padding-right - Maps with StyledConstants.space
pt	number \| string \| array	null	padding-top - Maps with StyledConstants.space
px	number \| string \| array	null	padding-left and padding-right - Maps with StyledConstants.space
py	number \| string \| array	null	padding-top and padding-bottom - Maps with StyledConstants.space
border	number \| string \| array	null	border - Maps with StyledConstants.borders
borderBottom	number \| string \| array	null	border-bottom - Maps with StyledConstants.borders
borderLeft	number \| string \| array	null	border-left - Maps with StyledConstants.borders
borderRight	number \| string \| array	null	border-right - Maps with StyledConstants.borders
borderTop	number \| string \| array	null	border-top - Maps with StyledConstants.borders
bg	number \| string \| array	null	background-color - Maps with StyledConstants.colors
color	number \| string \| array	null	color: Maps with StyledConstants.colors
height	number \| string \| array	null	height
width	number \| string \| array	null	width
fontSize	number \| string \| array	null	font-size
flex	number \| string \| array	null	flex
order	number \| string \| array	null	order
alignSelf	number \| string \| array	null	align-self
borderColor	number \| string \| array	null	border-color
borderRadius	number \| string \| array	null	border-radius
boxShadow	number \| string \| array	null	box-shadow
maxWidth	number \| string \| array	null	max-width
minWidth	number \| string \| array	null	min-width
maxHeight	number \| string \| array	null	max-height
minHeight	number \| string \| array	null	min-height
display	number \| string \| array	null	display
verticalAlign	number \| string \| array	null	vertical-align
opacity	number \| string \| array	null	opacity
overflow	number \| string \| array	null	overflow
ratio	number \| string \| array	null	ratio
flexBasis	number \| string \| array	null	flex-basis
background	number \| string \| array	null	background
backgroundImage	number \| string \| array	null	background-image
backgroundSize	number \| string \| array	null	background-size
backgroundPosition	number \| string \| array	null	background-position
backgroundRepeat	number \| string \| array	null	background-repeat
position	number \| string \| array	null	position
zIndex	number \| string \| array	null	z-index
left	number \| string \| array	null	left
top	number \| string \| array	null	top
right	number \| string \| array	null	right
bottom	number \| string \| array	null	bottom

StyledFlex Props

StyledFlex inherits all the props from the StyledBox component.

The StyledFlex component accepts the following props.

Name	Type	Default	Description
flexWrap	number \| string \| array	null	flex-wrap
flexDirection	number \| string \| array	null	flex-direction
alignItems	number \| string \| array	null	align-items
alignContent	number \| string \| array	null	align-content
justifyContent	number \| string \| array	null	justify-content

StyledText Props

StyledText inherits all the props from the StyledBox component.

The StyledText component accepts the following props.

Name	Type	Default	Description
fontFamily	number \| string \| array	null	font-family - Maps with Maps with StyledConstants.fonts
fontWeight	number \| string \| array	null	font-weight - Maps with Maps with StyledConstants.fontWeights
lineHeight	number \| string \| array	null	line-height - Maps with Maps with StyledConstants.lineHeights
letterSpacing	number \| string \| array	null	letter-spacing
textAlign	number \| string \| array	null	text-align