[docs] Improve right to left guide

docs/src/pages/guides/right-to-left/right-to-left.md

@@ -38,49 +38,25 @@ const theme = createTheme({
 
 ### 3. Install the rtl plugin
 
-In case you are using `jss` (up to v4), you need this JSS plugin to flip the styles: [jss-rtl](https://github.com/alitaheri/jss-rtl).
+When using either `emotion` or `styled-components`, you need this stylis plugin to flip the styles: [stylis-plugin-rtl](https://github.com/styled-components/stylis-plugin-rtl).
 
 ```sh
-npm install jss-rtl
+npm install stylis stylis-plugin-rtl
 ```
 
-If you are using `emotion` or `styled-components`, you need this stylis plugin to flip the styles: [stylis-plugin-rtl](https://github.com/styled-components/stylis-plugin-rtl).
+> **Note**: Only `emotion` is compatible with version 2 of the plugin. `styled-components` requires version 1. If you are using `styled-components` as styled engine, make sure to install the correct version.
+
+In case you are using `jss` (up to v4) or with the legacy `@material-ui/styles` package, you need this JSS plugin to flip the styles: [jss-rtl](https://github.com/alitaheri/jss-rtl).
 
 ```sh
-npm install stylis-plugin-rtl
+npm install jss-rtl
 ```
 
-**Note**: Only `emotion` is compatible with version 2 of the plugin. `styled-components` requires version 1. If you are using `styled-components` as styled engine, make sure to install the correct version.
-
 Having installed the plugin in your project, Material-UI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it.
 
 ### 4. Load the rtl plugin
 
-#### 4.1 JSS
-
-Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below.
-Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme.
-Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
-
-Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree.
-The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
-
-```jsx
-import { create } from 'jss';
-import rtl from 'jss-rtl';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
-
-// Configure JSS
-const jss = create({
-  plugins: [...jssPreset().plugins, rtl()],
-});
-
-function RTL(props) {
-  return <StylesProvider jss={jss}>{props.children}</StylesProvider>;
-}
-```
-
-#### 4.2 emotion
+#### 4.1 emotion
 
 If you use emotion as your style engine, you should create new cache instance that uses the `stylis-plugin-rtl` and provide that on the top of your application tree. The [CacheProvider](https://emotion.sh/docs/cache-provider) component enables this:
 
@@ -100,7 +76,7 @@ function RTL(props) {
 }
 ```
 
-#### 4.3 styled-components
+#### 4.2 styled-components
 
 If you use `styled-components` as your style engine, you can use the [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager) and provide the stylis-plugin-rtl as an item in the `stylisPlugins` property:
 
@@ -117,6 +93,30 @@ function RTL(props) {
 }
 ```
 
+#### 4.3 JSS
+
+Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below.
+Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme.
+Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
+
+Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree.
+The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
+
+```jsx
+import { create } from 'jss';
+import rtl from 'jss-rtl';
+import { StylesProvider, jssPreset } from '@material-ui/styles';
+
+// Configure JSS
+const jss = create({
+  plugins: [...jssPreset().plugins, rtl()],
+});
+
+function RTL(props) {
+  return <StylesProvider jss={jss}>{props.children}</StylesProvider>;
+}
+```
+
 ## Demo
 
 _Use the direction toggle button on the top right corner to flip the whole documentation_
@@ -125,18 +125,18 @@ _Use the direction toggle button on the top right corner to flip the whole docum
 
 ## Opting out of rtl transformation
 
-### JSS
+### emotion & styled-components
 
-If you want to prevent a specific rule-set from being affected by the `rtl` transformation you can add `flip: false` at the beginning.
+You have to use the template literal syntax and add the `/* @noflip */` directive before the rule or property for which you want to disable right-to-left styles.
 
 _Use the direction toggle button on the top right corner to see the effect._
 
-{{"demo": "pages/guides/right-to-left/RtlOptOut.js", "hideEditButton": true}}
+{{"demo": "pages/guides/right-to-left/RtlOptOutStylis.js", "hideEditButton": true}}
 
-### emotion & styled-components
+### JSS
 
-You have to use the template literal syntax and add the `/* @noflip */` directive before the rule or property for which you want to disable right-to-left styles.
+If you want to prevent a specific rule-set from being affected by the `rtl` transformation you can add `flip: false` at the beginning.
 
 _Use the direction toggle button on the top right corner to see the effect._
 
-{{"demo": "pages/guides/right-to-left/RtlOptOutStylis.js", "hideEditButton": true}}
+{{"demo": "pages/guides/right-to-left/RtlOptOut.js", "hideEditButton": true}}