Mui Typography alignment based on breakpoints

Question

Is there a way for me to change my Typography align property based on the pre-defined breakpoints?

For example:

<Typography
 align={{ xs: 'left', sm: 'left', md: 'left', lg: 'right', xl: 'right' }}>

The following will cause my page to display nothing but white. I usually use that syntax to work with margins in the Box class and it works fine.

Answer 1

With MUI v5, I found that sx prop has the ability to do breakpoints without importing the theme object (like in @atazmin's answer).

The breakpoints are mobile-first and get translated to min-width Media Queries. You can specify the starting value with xs and change it by breakpoint using lg and up.

<Typography
  sx={{
    textAlign: {
      xs: 'left',
      lg: 'right',
    },
  }}
>