使用Chart.js时如何覆盖Material UI的样式影响？

你遇到的问题是MUI的Paper/Card组件默认样式（比如白色背景）覆盖了图表的自定义样式，导致图表背景变白。可以通过以下两种方式解决：

方法一：让Paper背景透明并明确设置图表背景 #

MUI Paper默认带有白色背景，直接覆盖这个样式让它透明，同时给Chart.js配置透明背景，让父容器的渐变背景透出来：

1. 修改Paper的sx属性，添加backgroundColor: "transparent"，同时可以加内边距避免图表贴边：

<Paper sx={{ w: "250px", h: "400px", backgroundColor: "transparent", padding: 2 }}>
  <Line data={data} options={options} />
</Paper>

2. 更新Chart.js的options，添加backgroundColor: "transparent"和maintainAspectRatio: false（确保图表适配Paper的高度）：

const options = {
  responsive: true,
  maintainAspectRatio: false, // 关闭宽高比约束，让图表填满容器
  backgroundColor: "transparent", // 设置图表背景透明
  scales: {
    x: {
      grid: {
        color: "#3c3c3c",
      },
      ticks: {
        color: "#ffffff",
      },
    },
    y: {
      grid: {
        color: "#3c3c3c",
      },
      ticks: {
        color: "#ffffff",
      },
    },
  },
};

方法二：给图表套独立容器隔离样式 #

如果不想修改Paper的背景，可以在Line组件外层加一个div，设置自定义背景样式，隔离Paper的默认样式影响：

<Paper sx={{ w: "250px", h: "400px", padding: 2 }}>
  <div style={{ 
    background: "linear-gradient(180deg, #1a1a1a 10%, #4b4b4b 75%)",
    width: "100%",
    height: "100%",
    borderRadius: 8 // 可选，和Paper的圆角匹配
  }}>
    <Line data={data} options={options} />
  </div>
</Paper>

同样需要在Chart.js的options里设置maintainAspectRatio: false，让图表填满这个div。

另外注意你代码里的datasets中fill属性重复定义了（先false后true），建议统一为一个值，避免样式冲突。

内容的提问来源于stack exchange，提问作者YoshiW