Style Props

Style Props é uma maneira de alterar o estilo de um componente simplesmente passando adereços para ele. Ajuda economizar tempo fornecendo formas abreviadas úteis de estilizar componentes.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

m

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin

mt

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin-top

mr

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin-right

mb

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin-bottom

ml

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin-left

mx

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin-right + margin-left

my

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

margin-top + margin-bottom

p

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding

pt

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding-top

pr

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding-right

pb

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding-bottom

pl

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding-left

px

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding-right + padding-left

py

SpacingValue | { [key in Breakpoint]?: SpacingValue + "auto"}

  • spacing.layout

  • spacing.inner

padding-top + padding-bottom