Allow emmet CSS shorthands in the `sx` prop

[Zenoo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The sx prop already allows us to use m, my, mx, mt, mb, ml, mr, p, py, px, pt, pb, pl, pr as shorthands for margin and padding.

Being able to use other emmet CSS shorthands would be great.

Examples 🌈

<Box sx={{ d: 'inline' c: 'red', pos: 'fixed', fz: 12  }}>

Would be similar to:

<Box sx={{
  didplay: 'inline'
  color: 'red',
  position: 'fixed',
  fontSize: 12
}}>

Motivation 🔦

I've been using emmet since I started coding, seeing the same kind of feature for margin of padding in MUI reminded me of how time saving it is, and could be here too if it's implemented.

I'd be happy to provide a PR for this if someone guides me to where the modifications should be made.

[siriwatknp]

Note that the more shorthand, the more calculation. If we want to move forward with this, we should set up performance monitoring to keep track of the impact of these calculation.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@Zenoo Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.

[Zenoo]

Was this completed at some point?
I'm not seeing anything about it.

[mj12albert]

I closed this due to lack of upvotes, please reopen a new issue if you still have a need for this 🙏