dynamic label width textfield outlined material ui react

Question

I have a textfield variant outlined, and there I have a dynamic label, the problem is that when it changes the top line in width remains the same as the first time

<TextField
    id="debtorIin"
    name="debtorIin"
    label={debtorType === "pvt" ? "Ф.И.О.:" : "Наименование организации:"}
    disabled={debtorFullInfo && true}
    className={classes.textField}
    value={debtorIin}
    helperText={touched.debtorIin ? errors.debtorIin : ""}
    error={touched.debtorIin && Boolean(errors.debtorIin)}
    onChange={change.bind(null, "debtorIin")}
    margin="normal"
    variant="outlined"
/>

_{(source: imggmi.com)}

_{(source: imggmi.com)}

Answer 1

I think it happens because it won't recalculate the width on property change, you can solve that by creating two different TextField for it.

First, you need one that contains all the common props.

const MyTexField = ({ label, ...props }) => (
<TextField
    id="debtorIin"
    name="debtorIin"
    label={props.label}
    disabled={props.debtorFullInfo && true}
    className={props.classes.textField}
    value={props.debtorIin}
    helperText={props.touched.debtorIin ? props.errors.debtorIin : ""}
    error={props.touched.debtorIin && Boolean(props.errors.debtorIin)}
    onChange={change.bind(null, "debtorIin")}
    margin="normal"
    variant="outlined"
/>
);  

Then, you can use that component:

<MyTextField label="?.?.?.:" {...props} />