将CSS背景图添加到Material UI主题

Question

在 material UI 中，可以使用 createMuiTheme 函数调整和/或覆盖主题。这是我正在使用的完整文件：

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

//import wood from './static/wood.png';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          border: '2px solid blue',
          backgroundImage: 'url("/static/wood.png")',
        },
      },
    },
  },
});

export default theme;

全局样式应用于主体已确认有效-我可以看到蓝色边框。但是，无论我尝试什么都不能使背景图像正常工作。

通常，我会取消顶部的导入语句：import wood from './static/wood.png';，然后更改CSS行为：

backgroundImage: `url(${wood}),`

然而，仅使用import语句就会导致崩溃：

TypeError：Object（...）不是函数。似乎自定义material ui主题有一些特殊之处，不允许在同一文件中导入静态资源。

当我尝试使用图片的url（如上所示）时，总是会出现404错误。我的文件结构将图像放置在src > static > wood.png中，但我收到以下消息：

http://localhost:3000/static/wood.png 404（未找到）。

我已经尝试了数十种可能的path变量，但都没有成功，并且我所有努力研究正确路径的方法都表明我已经使用了正确的路径。
当使用Material UI主题定制向body添加背景图时，是否只能在背景图托管在单独的服务器上时才能实现？
我发现的唯一有效的示例都是这样做的（比如这个：https://codesandbox.io/s/v30yq681ql），但看起来应该有一种方法可以使用本地存储的图像。

如果问题确实是我的相对路径不正确，我该怎么做才能找出正确的路径呢？

如果有更好的方法可以在页面中添加背景图片，并且与Material UI兼容，那也可以，虽然我还没有看到除了全局覆盖body标签之外的其他方法。

- NRoch

Answer 1

如果您将图片放在 src 文件夹中而不是 static 文件夹中，例如：

src/components/wood.png

请恢复您的导入，如下所示：

import wood from './components/wood.png';

然后将 backgroundImage 设置为：

backgroundImage: `url(${wood})`,

应该可以工作。相同的配置（文件名不同，但位于同一位置）对我有用。

- Steve Goossens