Can someone explain the differences between Styled-components, Styled-system, emotion and theme-ui. And additionally, how does these libraries fit into MDX environment?
NB: I have gone through all of the documentation but unable to draw out differences
Styled-System is a superset of Styled-Components (or Emotion, up to you). It's meant to be used on top of those to make your theming neater, and also adds various quality of life improvements, like inline shorthand props. Theme-ui is built on top of that, to abstract even further and give you basic primitives out of the box. Often times if you use styled-system, you'll start creating lots of utility functions and components, and it'll start resembling Theme-ui. So that exists as solution for you.
Styled-Components/Emotion
Styled-System
Theme-ui/Rebass