I've created a styled component as shown below:
const FormBox = styled(Box)(({ theme }) => ({
width: "47vw",
height: "25vh",
backgroundColor: theme.palette.grey[100],
borderRadius: theme.shape.borderRadius,
marginLeft: "auto",
marginRight: "auto",
marginTop: theme.spacing(5),
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: theme.spacing(2),
columnGap: theme.spacing(5),
'&>*': { flex: '0 1 auto' },
'&:nth-child(4)': { flex: '1 1 200px', backgroundColor: 'red' }, //?????????????
}));
The issue is that the CSS specified for the 4th child (the button component below) does not apply. Here are the four children inside this styled component:
<FormBox component="form" noValidate autoComplete="off">
<TextField label="Title">{title}</TextField>
<TextField label="Amount">{amount}</TextField>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Date"
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => <TextField {...params} />}
sx={{ width: 50 }}
/>
</LocalizationProvider>
<Button variant="contained" sx={{height: 50}}>Add</Button>
</FormBox>