CODEWITHSUNDEEP
reactjsmaterial-uijss
Amit Feldman
Amit Feldman

Reputation: 121

Material-UI: flip:false doesn't work as expected

I'm new to Material-UI and jss and adding them to a right-to-left project.

I set it up according to the docs and everything seems to work. MUI components are automatically flipped. However, we still need some components to not be flipped and work normally with ltr. I tried to work with the flip: false property seen here in the docs. It works for the simple example in the docs on normal divs (flips text-align: right to text-align: left). If I put the flip on a MUI component it doesn't do anything.

const style = {
    affected: {
        textAlign: 'right'
    },
    unaffected: {
        textAlign: 'right',
        flip: false
    }
}

Classes added to the component

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.affected}
                />
            }
            label="Affected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.unaffected}
                />
            }
            label="Unaffected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

In the example above I would expect this to render two switches where on the first one the styles on the x-axis are flipped to ltr. However, it only changes the text-align like in the docs example. I'm not sure if this is supposed to work and it's a bug or if there's even a way to achieve this. I haven't found any examples on the web on how to flip specific parts of a component and not just overriding the whole component to ltr and disabling the jss-rtl.

Thanks in advance for any help!

Edit: Added a demo.

Upvotes: 4

Views: 1613

Answers (1)

Amit Feldman
Amit Feldman

Reputation: 121

I submitted this as an issue for Material-UI and got an answer back. Here's a demo where I achieved the effect that I wanted.

const ltrTheme = {
  ...theme,
  direction: 'ltr'
}

function Demo({classes}) {
  return (
    <FormGroup>
        <FormControlLabel
          control={
            <Switch color="primary"/>
          }
          label="RTL Switch"
        />
        <FormControlLabel
          control={
            <MuiThemeProvider theme={ltrTheme}>
              <div dir="ltr">
                <Switch color="primary"/>
              </div>
            </MuiThemeProvider>
          }
          label="LTR Switch"
        />
      </FormGroup>
  );
}

All you have to do is wrap the component you want LTR with a new theme with direction: ltr, and a div with dir='ltr'.

Upvotes: 3

Related Questions