Difference between the `className` prop and the new MUI system utility `sx` prop?

Question

Ive mostly been using the makeStyles hook to style my material-ui components. It's fairly straightforward and modular and performant.

Material-UI v5 has the new sx prop that seems fairly promising, but towards the bottom of their docs there, they mention that there is a performance tradeoff.

My question is what's the ultimate difference here between makeStyles and sx, and should I consider switching?

I feel like I should also point out that using the sx prop seems to bulk up the return section of the code and using makeStyles just feels cleaner.

Am I missing something here or is there something revolutionary about sx, that should make me want to use it?

Answer 1

As per my understanding SX is the alternative of style.

When it comes to ReactJs, if you try to use inline styles you need to

In HTML:

<div class="awesome" style="background-color: #f00">
  <p style="font-size:14px;">
</div>

Converted to JSX:

<div className="awesome" style={{backgroundColor: '#f00'}}>
   <p style={{fontSize: '14px'}}></p>
</div>

With SX : It is a super-set, Responsive, themes

<div sx={{ width: { tablet: 100, laptop: 300, desktop: 500, }, }} > 
    This box has a responsive width 
</div>

Don't be in a Hurry to use, as per the benchmark results it is taking lot of time https://next.material-ui.com/system/basics/#performance-tradeoff