如何从 React-Admin 覆盖 TextInput

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