修改Mui Dialog及Card的背景色

目标效果是这种背景色

尝试直接修改

 // Dialog是占据整个屏幕的 不能设置background 否则dialog后面整个屏幕就是background的颜色
    // 如果要弹出框有滚动条也不能给Dialog设置overflow:scroll否则就是给整个屏幕设置滚动
    <Dialog
      open={showNotificationModal}
      sx={{
        borderRadius: "8px",
        "& .MuiPaper-root": {
          backgroundColor: "#22262F !important"
        },
      }}
    >

<Card
        sx={{
          display: "flex",
          width: "500px",
          height: "420px",
          padding: "24px",
          flexDirection: "column",
          alignItems: "center",
          borderRadius: "8px",
          backgroundColor: "#22262F !important",
     
        }}
      >

没有效果，在控制台发现是元素默认带有的backgroundImage属性导致的，

  <Dialog
      open={showNotificationModal}
      sx={{
        borderRadius: "8px",
        "& .MuiPaper-root": {
          backgroundImage:"none !important",
          backgroundColor: "#22262F !important"
        },
      }}
    >
      {/* <QuestionTable form={form}/> */}
      <Card
        sx={{
          display: "flex",
          width: "500px",
          height: "420px",
          padding: "24px",
          flexDirection: "column",
          alignItems: "center",
          borderRadius: "8px",
          backgroundColor: "#22262F !important",
          backgroundImage:"none !important"
        }}
      >

即可