support RTL

[JolianGof]

I have cloned the SAKAI template and added primereact-sass-theme to it. Even though primereact-sass-theme mostly supports RTL it does not do very well with margin, padding, and border-radius. I am trying to fix that by using the inline CSS property which is working fine. The problem I am facing is that when I inspect some components there are classes or CSS properties that are not in the primereact-sass-theme/components and are overriding the primereact-sass-theme/components styling and I can only apply the styling by using the !important or add the class to the primereact-sass-theme/components.

• here is an example:
  1: I have a SelectButton component and when I inspect it this what I see:

as you can see in this picture the class .p-button:first-of-type does not exist in the primereact-sass-theme/components. So, I would have to add the class and also add the !important to override it.
like this

.p-button-group .p-button:first-of-type {
  
    border-start-start-radius: 10px !important;
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
    border-end-start-radius: 10px !important;
    border-right: $toggleButtonBorder !important;
}

• there also many cases like this

is there a reason why this happens and if so how can I fix it