How can I change the style of input inside TextInput

46 views Asked by At

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
        />
    );  
};  
0

There are 0 answers