📎 Use sx prop instead of inline style

[sugar-cat7]

Description

Replace inline styles and use CSS properties provided by MUI(e.g.margin -> m).

https://mui.com/system/the-sx-prop/

[sruenwg]

I took a look at the thread over here, but may I ask the reason for preferring the shorthand over the standard CSS property names?
I am curious to know because I personally value legibility over brevity.
(To be clear, I am not super opposed to the idea — I am just interested in understanding the motivation.)

[sugar-cat7]

I don't particularly insist on using abbreviations. I just wanted to unify the rule of whether to use abbreviations or not throughout the codebase. (I was under the mistaken impression that the current codebase was a mix of abbreviated and non-abbreviated forms, which might just be my oversight and lack of comfimation 🫠)

Additionally, since abbreviations cannot be used within styled components, it might be better to adopt a policy of not using abbreviations to keep things consistent.

https://mui.com/system/styled/#sx-provides-more-shortcuts-than-styled

[sruenwg]

I was under the mistaken impression that the current codebase was a mix of abbreviated and non-abbreviated forms

No, I believe you are right that we currently mix the two 😛
I can definitely agree with the sentiment that we should try to be consistent.

Especially now that you mention the styled function (I hadn't even thought about it earlier), I think my preference would be to use CSS property names over MUI aliases.
The decision is of course ultimately up to you though — I just wanted to give my two cents on the matter since it caught my eye.