我目前正在尝试制作一个包含图表的卡片组件。我用Chart Js创建了这个折线图，我的React JS主要是在MUI中，当我在图表周围 Package Paper或Card组件时，它会改变一些样式，例如使背景变为白色。如果我把它放在一个div中，它会保留它的属性，有没有人能解决这个问题？

const labels = ["1", "2", "3", "4", "5"];

  const data = {
    labels: labels,
    datasets: [
      {
        label: "Assessment Score",
        data: [20, 50, 40, 80, 100],
        fill: false,
        borderColor: "#a259ff",
        tension: 0.1,
        fill: true,
      },
    ],
  };
  const options = {
    scales: {
      x: {
        grid: {
          color: "#3c3c3c",
        },
        ticks: {
          color: "#ffffff",
        },
      },
      y: {
        grid: {
          color: "#3c3c3c",
        },
        ticks: {
          color: "#ffffff",
        },
      },
    },
  };
  return (
    <div
      style={{
        background: "linear-gradient(180deg, #1a1a1a 10%, #4b4b4b 75%)",
        color: "#1b1b1b",
        height: "100vh",
        width: "100%",
      }}
    >
      <Paper sx={{ w: "250px", h: "400px" }}>
        <Line data={data} options={options} />
      </Paper>
    </div>
  );
};

export default ApplicationContent;

字符串