css nth-child selector doesn't work with styled mui component-CodePudding

I have a styled component like this:

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" }, //????????????? 
}));

in the last line of code I targeted the 4th child(the button component in the bellow code) and I want to apply some CSS on it but it doesn't work.

and inside this styled component there are four child as bellow:

<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>

CodePudding user response：

Please try with &>*:nth-child(4) instead of &:nth-child(4).

You can make sense from this link. https://www.codegrepper.com/code-examples/css/css selector last element