Material UI: Apply the fullwidth feature to the Textfield

Question

I have a staff monitoring project that contains many components and among these components is "creating a workspace" and how clear in the picture I made a component and put many elements in it, but the problem is that the "TextField" I want it to be until the end of the page And although I put "Full Width", it is only complete in the middle.

How can I solve the problem?

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1
        },
        paper: {
            padding: theme.spacing(2),
            textAlign: 'center',
            color: theme.palette.text.secondary,
        },
        resize:{
            fontSize:24
        }
    }),
);

const Settings: FC = () => {

    const classes = useStyles();

    return (
        <div className={classes.root}>
            {/*<Container maxWidth="lg" style={{backgroundColor: 'red'}}>*/}
            <Grid container  direction="row">
                <Grid item>
                        <Avatar style={{width: '5rem', height: '5rem'}} alt="Remy Sharp"
                                src="/static/images/avatar/1.jpg"/>

                </Grid>
                <Grid item >
                        <TextField
                            fullWidth
                            name="workspaceName"
                            placeholder="Workspace Name"
                            variant="standard"
                            style={{
                                paddingLeft: '1.4rem',
                                transition: ' all .2s cubic-bezier(.785,.135,.15,.86) 0s',
                                display: 'flex',
                                alignItems: 'center',
                                flexGrow: 1,
                                position: 'relative',
                                color: '#828588',

                            }}
                            InputProps={{
                                classes: {
                                    input: classes.resize,
                                },
                            }}
                            defaultValue="nameeeee"
                        />
                </Grid>

            </Grid>
            <Grid container spacing={5} direction="row"  mt={14}>
                <Grid item xs>

                    <Button style={{
                        minWidth: '10rem',
                        fontSize: '1.5rem',
                        height: '44px',
                        fontWeight: 400,
                        textShadow: 'none',
                        color: '#fd71af',
                        border: 0,
                        background: 'none'

                    }}>Delete Workspace</Button>

                </Grid>
                <Grid item >
                    <Button
                        color="primary"
                        component={RouterLink}
                        to="/dashboard/workspaces/1"
                        variant="contained"
                        style={{
                            minWidth: '13rem',
                            minHeight: '4.3rem',
                            fontSize: '1.4rem',
                            backgroundColor: '#7b68ee',
                            borderRadius: 6,
                            marginLeft:'60rem'

                        }}
                    >
                        Saved
                    </Button>


                </Grid>

            </Grid>
            {/*</Container>*/}
        </div>
    );
}

export default Settings;

Answer 1

The fullWidth attribute sets the width to 100% of its parent. Its parent (The <Grid> component) isn't occupying the full space. Add css style { flexGrow: 1 } to the <TextField>'s <Grid> parent or set the xs attribute for the <Grid>

Check this part of the docs for reference