[Drawer] RTL is broken in v5 with styled-components

Current Behavior 😯

While using styled-components as an engine with RTL support, according to the guidelines

• stylis-plugin-rtl
• body is set on direction rtl
• theme is set with direction: rtl

then the temporary Drawer comes from the wrong side.

reproduced here : https://codesandbox.io/s/temporarydrawer-material-demo-forked-qc14i?file=/index.js

try to click on the RIGHT / LEFT buttons.

Expected Behavior 🤔

the drawer comes out from the correct side

Steps to Reproduce 🕹

reproduced here : https://codesandbox.io/s/temporarydrawer-material-demo-forked-qc14i?file=/index.js

BTW, when using emotionjs as the styling engine the issue is not reproduced.

Your Environment 🌎

    "@emotion/react": "latest",
    "@material-ui/core": "5.0.0-alpha.27",
    "@material-ui/icons": "5.0.0-alpha.27",
    "@material-ui/styled-engine-sc": "^5.0.0-alpha.25",
    "clsx": "latest",
    "react": "latest",
    "react-dom": "latest",
    "styled-components": "5.2.1",
    "stylis-plugin-rtl": "1.1.0"

[ehsanonline]

if you want the Drawer to come from the right side on a rtl page, set these props:

anchor="left"
PaperProps={{ style: { left: "unset", right: 0 }, }}

the drawer animation will be correct. if you want it to come from the left side just opposite the props.

[mobinco]

I fixed it by this code:

anchor="left"
PaperProps={{
    sx: {
        left: 'unset !important',
        right: '0 !important'
    }
}}