In Material-UI v5, should I prefer the css prop over the sx prop or vice versa?

Question

I believe these two props both use emotion under the hood and they seem to do much the same thing. I've been using the css prop because I prefer template tags and real css vs. javascript style names for css properties. Is there any reason to prefer one over the other given that they are basically interchangeable in terms of functionality?

Answer 1

I read the page about the new MUI styles system here: https://next.material-ui.com/system/basics/

And it feels to me that the main difference is the following:

1. The css prop lets you write something that looks like classic css, as you would do in actual CSS, or Less/Sass, or styled-components

2. The sx prop gives access to the 'system' which is a set of utilities to quickly access props with shortcuts, as well as theme properties, which already existed before v5, but are now even easier to use.... after some learning curve...

The above documentation page gives a lot of examples.