RTL терпит неудачу для абсолютно позиционированных предметов

Question

У меня есть пара абсолютно позиционированных элементов, и они не меняются местами, когда я использую RTL. Я предполагал, что когда left: 0 для LTR, оно автоматически станет правым: 0 для RTL. Что является лучшим способом для обработки RTL для абсолютно позиционированных предметов. В настоящее время я просто присваиваю им разные классы и даю соответствующее позиционирование. Dir хранится в избыточном состоянии и передается как реквизит

    containerMenu: {
        [theme.breakpoints.down('sm')]: {
            position: 'absolute',
            top: '10px',
            left: '0px',
        }
    },
    /* RTL override  */
    containerMenuRTL: {
      [theme.breakpoints.down('sm')]: {
        position: 'absolute',
        top: '10px',
        left: 'auto',
        right: '0px'
      }
    }

 <div className={dir === "rtl" ? classes.containerMenuRTL : classes.containerMenu}>