material-ui: [RTL] /* @noflip */ is not working with sx prop

FYI: You can use /* @noflip */ directly in the sx prop if you set it as a part of the value declaration:

For example:

<Typography
  variant="body1"
  sx={{
    textAlign: "left /* @noflip */"
  }}
>
  Force left aligned Text
</Typography>

cc: @ZeeshanTamboli

Thanks for the reproduction.

Looks like it is not possible with the sx prop. We can add it as a feature.

Awesome @scarabaeus . Thanks!

@Vahid-Taheri @maneetgoyal @omerman @sinamoradi1375 Does this work for you? If yes, we can close this issue.

@ZeeshanTamboli

Awesome @scarabaeus . Thanks!

@Vahid-Taheri @maneetgoyal @omerman @sinamoradi1375 Does this work for you? If yes, we can close this issue.

Sorry for the delay 😉 It works well yes.

FYI: You can use /* @noflip */ directly in the sx prop if you set it as a part of the value declaration:

For example:

<Typography
  variant="body1"
  sx={{
    textAlign: "left /* @noflip */"
  }}
>
  Force left aligned Text
</Typography>

cc: @ZeeshanTamboli

very interesting solution. good job bro, that worked for me

I’ll update the MUI RTL Guide with an example if this works out for everyone.

🙄 It is important. can be achieved easily if sx would accept css object like so >

<MyComponent sx={css`
/*! @noflip */
padding-left: 5px;
`}