I used React-Admin TextInput and I am trying to create a left-to-right input. I used stylish-pugin-rtl package which makes all styled-components right-to-left (probably using scripts). Now I want to exclude one input. Overriding it using sx isn't effective, and it still remains rtl;
I just can change the direction using the style attr of input, however I don't know how to access it. TextInput creates a div and an input inside it:
// LTRTextInput.js
import React from 'react';
import { TextInput } from 'react-admin';
const LTRTextInput = ({ ...props }) => {
return (
<TextInput
{...props}
// Use sx prop to apply styles
sx={{
'& .MuiInputBase-input': {
backgroundColor:'red',
direction: 'ltr !important', // It doesn't work
},
}}
// need to change the style of input inside TextInput
/>
);
};