How to override the TextInput from React-Admin

Question

I only want to override the specific fields. Setting the custom theme will override the other fields too.

Tried using useStyles but didn't work and tried using direct style props but that also didn't work.

const useStyles = makeStyles({
    MuiInputBase: {
        root: {
            width: "800px"
        }
    }
});


<TextInput className={classes.MuiInputBase} variant="outlined" label="Search" source="search" alwaysOn />

Answer 1

As explained in the docs, className only allows to override the style of the root component. To override the inner styles, you must use the classes prop:

const useStyles = makeStyles({
    MuiInputBase: {
        root: {
            width: "800px"
        }
    }
});

const MyInput = () => {
   const classes = useStyles();
   return <TextInput classes={classes} variant="outlined" label="Search" source="search" alwaysOn />;
};

More details at https://marmelab.com/react-admin/Theming.html#overriding-a-component-style