Grid where children are all same width-CodePudding

I have a <Grid> with six children (<Grid item>). Each of the six items has the property xs = {1.5} so they each take up the same amount of space.

Within each <Grid item> are various input fields. How can I get the input field to take up the full width of the <Grid item>?

Would I have to pass something to the children through the sx prop? I've tried some flex properties without any luck so far. I can use something other than Grid - I'm new to React and this is just what I've been trying to work with so far.

Below is the code. I removed things like value = 'something' or id = 'myID' and left only the relevant info for readability.

<Container maxWidth = 'false' sx = {{mx: 1, my: 1}} disableGutters>    
    <Grid container sx = {{border: '1px solid white'}}>
        <Grid item container direction = 'row' sx = {{my: 1}}>
            <Grid item xs = {1.5}>
                <TextField label = '1'/>
            </Grid>
                    
            <Grid item xs = {1.5}>
                <FormControl>
                    <InputLabel>2</InputLabel>
                    <Select>
                        <MenuItem>...</MenuItem>
                    </Select>
                </FormControl>
            </Grid>
                    
            <Grid item xs = {1.5}>
                <FormControl>
                    <InputLabel>3</InputLabel>
                    <Select>
                       <MenuItem>...</MenuItem>
                    </Select>
                </FormControl>
            </Grid> 

            <Grid item xs = {1.5} sx = {{border: '1px dotted red'}}>
                <FormControl>
                    <InputLabel >4</InputLabel>
                    <Select>
                        <MenuItem>...</MenuItem>
                    </Select>
                </FormControl>
            </Grid>
                    
            <Grid item xs = {1.5}>
                <FormControl>
                    <InputLabel>5</InputLabel>
                     <Select>
                         <MenuItem>...</MenuItem>
                    </Select>
                </FormControl>
            </Grid>

            <Grid item xs = {1.5}>
                <TextField label = '6'/>
            </Grid>

        </Grid>
    </Grid>
</Container>

CodePudding user response：

you can add width or any other css property to FormControl or any other Mui Component using sx props. check https://mui.com/system/the-sx-prop/ for more details.

<FormControl sx={{width:"100%"}}>
...
</FormControl>