Saltar al contenido

Properties

This page lists all of the custom system properties, how are they linked with the theme, and which CSS properties they compute.

Let's take the following row from the table below, for example:

Grupo System style function System key(s) CSS property/properties Theme mapping
spacing spacing mb, marginBottom margin-bottom theme.spacing(value)
  1. The Group column links to the documentation page where this group of properties is described; in this example, the spacing page.

  2. The System style function column lists the function which generates the properties shown in the other columns, as a reference in case you want to add this functionality to your custom components. The functions can be imported from @material-ui/system. You can see an example of using the style functions on the advanced page.

  3. The System keys column lists the key(s) by which you can use this property with the sx prop (or as a system function).

  4. The CSS property column describes which CSS property will be generated when this system property is used.

  5. And lastly, the Theme key column tells you how this property is wired with the theme – with this example, whatever value you might use will be used as input to the theme.spacing helper.

Let's take a look at an example:

<Box sx={{ mb: 3 }} />

// is equivalent to
<Box sx={{ marginBottom: theme => theme.spacing(3)}} />

As the default theme spacing is 8px, this will result in the following CSS class:

.hash-MuiBox {
  margin-bottom: 24px;
}

Properties reference table

Grupo System style function System key(s) CSS property/properties Theme mapping
borders border border border ${value}px solid
borders borderBottom borderBottom border-bottom ${value}px solid
borders borderColor borderColor border-color theme.palette[value]
borders borderLeft borderLeft border-left ${value}px solid
borders borderRadius borderRadius border-radius theme.shape.borderRadius*value
borders borderRight borderRight border-right ${value}px solid
borders borderTop borderTop border-top ${value}px solid
shadows boxShadow boxShadow box-shadow theme.shadows[value]
display displayPrint displayPrint display none
display displayRaw display display none
flexbox alignContent alignContent align-content none
flexbox alignItems alignItems align-items none
flexbox alignSelf alignSelf align-self none
flexbox flex flex flex none
flexbox flexDirection flexDirection flex-direction none
flexbox flexGrow flexGrow flex-grow none
flexbox flexShrink flexShrink flex-shrink none
flexbox flexWrap flexWrap flex-wrap none
flexbox justifyContent justifyContent justify-content none
flexbox order order order none
palette bgcolor bgcolor backgroundColor theme.palette[value]
palette color color color theme.palette[value]
positions bottom bottom bottom none
positions left left left none
positions position position position none
positions right right right none
positions top top top none
positions zIndex zIndex z-index theme.zIndex[value]
sizing height height height none
sizing maxHeight maxHeight max-height none
sizing maxWidth maxWidth max-width none
sizing minHeight minHeight min-height none
sizing minWidth minWidth min-width none
sizing width width width none
sizing boxSizing boxSizing box-sizing none
spacing spacing m, margin margin theme.spacing(value)
spacing spacing mb, marginBottom margin-bottom theme.spacing(value)
spacing spacing ml, marginLeft margin-left theme.spacing(value)
spacing spacing mr, marginRight margin-right theme.spacing(value)
spacing spacing mt, marginTop margin-top theme.spacing(value)
spacing spacing mx, marginX margin-left, margin-right theme.spacing(value)
spacing spacing my, marginY margin-top, margin-bottom theme.spacing(value)
spacing spacing p, padding padding theme.spacing(value)
spacing spacing pb, paddingBottom padding-bottom theme.spacing(value)
spacing spacing pl, paddingLeft padding-left theme.spacing(value)
spacing spacing pr, paddingRight padding-right theme.spacing(value)
spacing spacing pt, paddingTop padding-top theme.spacing(value)
spacing spacing px, paddingX padding-left, padding-right theme.spacing(value)
spacing spacing py, paddingY padding-top, padding-bottom theme.spacing(value)
typography typography typography font-family, font-weight, font-size, line-height, letter-spacing, text-transform theme.typography[value]
typography fontFamily fontFamily font-family theme.typography[value]
typography fontSize fontSize font-size theme.typography[value]
typography fontWeight fontWeight font-weight theme.typography[value]
typography textAlign textAlign text-align none