What you were expecting:
I have a list filter with one field. I am trying to make text input 100% of width as follows. However it still stays the default width.

const useStylesFilterForm = makeStyles({
  form:{ backgroundColor: 'orange'}
})


const PostFilter = (props) => {
  const classes=useStylesFilterForm();
  return (
    <Filter {...props}  classes={classes} >
      <TextInput label="Search 1" source="id" alwaysOn  fullWidth={true}  />
    </Filter>
  );
}

What happened instead:
Although form control received MuiFormControl-fullWidth class which set width:100% on the element), the Text Input Element still remained the original size.

Steps to reproduce:
Add PostFilter component as filter to any list

Related code:
React admin used the following html code to render filter (notice MuiFormControl-fullWidth applied properly)

<form class="RaFilter-form-194 makeStyles-form-191 RaFilterForm-form-195">
<div data-source="id" class="filter-field RaFilterFormInput-body-197">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth">...
.

I was able to force Chrome to render 100% width by adding the following styles:

• add flex: "1 0 auto" to form div;

• add width:100% style to the parent div (div data-source="id"); however i was not able to add this style using properties passed TextInput or Filter components:

  • I also noticed that TextInput should accept formClassName property to be applied to the parent div (per https://marmelab.com/react-admin/Inputs.html#common-input-props); However, the following code also did not work, as no styles were applied to the parent div. Additionally, helper Text did not render.

const useStylesFilterForm = makeStyles({
  form:{flex: "1 0 auto"},
  formClassName:{backgroundColor:"red", width:"100%"},
  inputComponent:{width:"100%"}
})


const PostFilter = (props) => {
  const classes=useStylesFilterForm();

  return (
    <Filter {...props}  classes={{form:classes.form}} >
      <TextInput
        resettable
        label="Report Search"
        source="search:reportSearch"
        alwaysOn
        fullWidth={true}
        formClassName={classes.formClassName}
        helperText="Helper text"
        className={classes.inputComponent}
        />
    </Filter>
  );
}

Environment

• React-admin version: 3.3.3
• Last version that did not exhibit the issue (if applicable):
• React version: 16.13.1
• Material UI 4.9.7