如何在Mantine中为body和Paper组件设置不同背景色？

问题核心是你修改了全局变量--mantine-color-body为灰色，而Paper组件默认引用该变量作为背景色，导致两者同步变色。以下是几种可行的解决方案：

方案1：直接给Body设置背景色（不修改全局变量） #

放弃修改--mantine-color-body，直接给body元素设置背景色，这样Paper组件会继续使用默认的白色背景：

:root[data-mantine-color-scheme="light"] body {
  background-color: grey;
}

方案2：通过Paper组件Props单独设置背景色 #

在使用Paper组件时，通过bg属性显式指定白色背景：

import { Paper } from '@mantine/core';

// 使用时直接指定背景色
<Paper bg="white" p="md">
  {/* 组件内容 */}
</Paper>

方案3：全局覆盖Paper组件的样式 #

在你的app.css中添加全局样式，强制Paper组件使用白色背景：

:root[data-mantine-color-scheme="light"] .mantine-Paper-root {
  background-color: white !important;
}

方案4：通过Mantine主题配置默认样式 #

在主题中统一设置Paper组件的默认背景色，避免每次使用都手动指定：

import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  components: {
    Paper: {
      defaultProps: {
        bg: 'white',
      },
    },
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      {/* 你的应用内容 */}
    </MantineProvider>
  );
}

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