Width changes in material-ui TextField when label shrinks-CodePudding

I have a component of a material-ui TextField, with some customizations. In this The width should be like in the light blue section. The element in green is the shrinked label.

When shrink: false there is no problem, the component keeps the right width.

I have tried to set max-width on multiple elements in the component, but nothing has worked and I searched but couldn't find anything about this particular issue. Can someone point me in the direction to force this max-width on the right element?

CodePudding user response：

Since you are using mui it is better to use grids instead of component wrappers. For instance you can insert your textfield inside a grid container and give it simple styling by providing xs, md, and xl. View docs for more info.

    <Grid container spacing={2}>
      <Grid item md={6} xs={12} xl={6}>
        <TextField.../>
      </Grid>
    </Grid>

You can then add extra textfields inside the container by wrapping them with grid items and styling props.

CodePudding user response：

One option is you can select the fieldset element to control/apply the custom width to overall component. E.g. applying style using the wrapper class in makeStyles.

wrapper: {
  maxWidth: "45px",
  width: "45", //for testing
  "& fieldset": {
    minWidth: 44,
    paddingRight: 0,
    marginRight: 0,
    paddingLeft: 0,
    marginLeft: 0
  }
},

Updated sandbox.