CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
RanST
RanST

Reputation: 502

How can I opt-out of 'rtl' by using {flip: false}?

I'm trying to achieve the same behavior as the MUI docs show in this link. By changing from 'ltr' to 'rtl' the 'Affected' will flip side and the 'Unaffected' won't flip.

I've created a demo illustrating the use of {flip: false} as described in the documentation example while following the steps to apply RTL.

Expected behavior:

  1. The 'Affected' div will flip side
  2. The 'Unaffected' div won't flip side as well as the Switch component
  3. The 'Unaffected' in nested theme&div will always stay 'ltr

Actual behavior:

  1. V - flips side and should
  2. X - both flip side and should NOT
  3. V - stays 'ltr'

How can I opt-out of 'rtl' by using {flip: false} as I did with nesting theme&div ?

Upvotes: 3

Views: 1169

Answers (1)

Mir-Ismaili
Mir-Ismaili

Reputation: 16948

First of all, It's necessary to mention you need to use left/right instead of start/end! CSS's start and end are smart enough and you don't need using an extra library to manage ltr/rtl switching. Additionally, AFAIK using jss-rtl doesn't any effect on start/end values (w/ or w/o flip).

enter image description here

But why do you see both elements on the right side, in the above image? This is because of the use of direction: "rtl" and "start" and is due to CSS specifications (irrelevant to jss-rtl and MUI). In RTL directions, start means right, NOT left!

The second important note is in your case, both Affected and Unaffected elements are UNAFFECTED, actually (even when you correct above issue)! enter image description here So we can't expect it to has any effect.

Finally, I found out you need to export your bare two elements (Affected and Unaffected divs) into a react component:

function ReactComponent() {
  const classes = useStyles();

  return (
    <>
      <div className={classes.affected}>Affected</div>
      <div className={classes.unaffected}>Unaffected</div>
    </>
  )
}

And use it instead of them: enter image description here

The fork: https://codesandbox.io/s/material-demo-forked-9w61u?file=/demo.js

Thank @mustafahlvc for his example on CodeSandbox.

Upvotes: 1

Related Questions