Bug: RTL has inverted scroll direction

[JanStevens]

Hi,

I noticed in RTL mode the scroll direction is inversted. Looking at the code I see why, since in RTL everything is flipped using transform.

A better solution would be to rely more on the native browser capabilities like direction: rtl and dir=rtl, additionally for emotion there is a stylis plugin: https://github.com/styled-components/stylis-plugin-rtl

Which can be used like so when creating a emotion cache, you will need 2 different caches (one for ltr and one for rtl). If the user specifies isRTL you can use the different cache for example.

import rtlPlugin from 'stylis-plugin-rtl';

const cacheRtl = createCache({
  key: 'rtl',
  stylisPlugins: [rtlPlugin],
});

Regards