Difference between 'styles', 'style' and 'sx'?

[albertbronsky]

Just wanted to clarify what is the difference between these props and when should you use each one?

[rtivital]

sx add styles to root element, styles can be used to add styles to every nested element that has selector within component

[albertbronsky]

sx add styles to root element, styles can be used to add styles to every nested element that has selector within component

And what about style?

[rtivital]

style works the same way as it would with react elements (<div style={{ height: 1 }} />), it adds inline styles to element, while sx and styles add styles via emotion (inserts in head).