Material-ui: Better RTL support (specifically for Card Headers)

[mmartha]

It would be great if things that typically use margin-left or margin-right to provide correct spacing could instead be empty flex-items that take up the same amount of space. This would result in automatic RTL compatibility for CardHeaders.

An example use-case for visual aide:

[eps1lon]

Are CardHeaders currently not supporting RTL or are you asking for RTL behavior without adding jss plugins?

Would be nice to have markup + css for the two approaches to properly judge them.

[mmartha]

CardHeaders do _mostly_ support RTL (at least much better than the beta version, which we were using until recently). The second screenshot is using the out-of-the-box CardHeader component with the page direction switched to 'rtl'. The issue specifically is that the spacing around the avatar is hard-coded with margin-right, so does not adjust correctly when the page is flipped.
.MuiCardHeader-avatar-95 { flex: 0 0 auto; margin-right: 16px; }

I might not have dug far enough into the documentation, but is there a jss plugin I could use that would adjust these details like spacing for MaterialUI components automatically?

[mbrookes]

I haven't tested it, but I believe step 3 here will solve your issue: https://material-ui.com/guides/right-to-left/

Edit, actually, if you take a look at the demo here: https://material-ui.com/demos/cards/#complex-interaction and switch the docs to RTL:

it does appear to work correctly:

[oliviertassinari]

I agree with @mbrookes. It's very likely an issue with step 3 of the guide. @mmartha This should solve your problem :).

[mmartha]

It did indeed, thank you for your help!