I'm trying to add jss-rtl to an existing react project like this:
import {
StrictMode
} from "react";
import ReactDOM from "react-dom";
import App from "./App";
import jss from "jss";
import rtl from "jss-rtl";
// Configure JSS
jss.use(rtl());
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App/>
</StrictMode>,
rootElement
);so I expect when I create styles using createUseStyles in react-jss, it renders styles in rtl form.
import {
createUseStyles
} from "react-jss";
export const useStyles = createUseStyles({
App: {
marginLeft: 100,
fontFamily: 'sans-serif'
}
});
export default function App() {
const classes = useStyles();
return ( <div className={classes.App}>
<h1> Hello CodeSandbox <h1>
<h2> Start editing to see some magic happen! </h2>
</div>
);
}but as the result that you can see in this sandbox, margin-left: 100px didn't turn into margin-right: 100px and styles are stayed unaffected.
I've read many answers but all of them were based on material-ui.
I also configured project as jss-rtl documents said, but it didn't mention jss-react.
when I configure and write styles exactly as same as documents everything is fine and it flips styles like margin & padding perfectly, but it doesn't work in react (when I use hooks like createUseStyles in react-jss).
how can I fix that?