[system] Prefer styled-components's css prop over Box css

[lcswillems]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

A css prop had been added in Styled-components v4: https://www.styled-components.com/docs/api#css-prop. It is a very handy way to stylize a component, and personnaly I use it a lot.

However, it doesn't work on the Box component because Box has already a css property. I think it would be preferable not to have one to make it possible to use Styled-components one.

[eps1lon]

Could you follow the issue template and include a code example and describe what you expect the transpiled output should look like?

[damir-sirola]

If you want inline styles you can use styles prop

[oliviertassinari]

@lcswillems What do you think about this plan? #22819 (comment)

[lcswillems]

I am not sure about what you ask me to think about precisely but I largely prefer option 2 ("write them under one prop") over the other one for these reasons:

1. "all system props would be easily discoverable" as @mnajdova said. I don't know how many styling props there are (let's say 50). Then if I want to use a new component I don't know well, it will be very hard to find the properties that are really specific to it.
2. I prefer when styling props are grouped because I am used to separating css and html or separating css and logic props.

I hope my answer helps, and if I answered about the good thing.

[oliviertassinari]

I would be in favor of dropping the css helper. I agree with the request, I think that we should avoid conflicts with styled-components/emotion default API, also the sx prop that is worked on in #23053 should cover the use case. @mnajdova What do you think?

[mnajdova]

Now that we have the sx prop is safe to drop the css prop. Will work on a PR 👍