将CSS背景图像添加到材质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语句：import wood from './static/wood.png';，然后将CSS行更改为：

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

然而，仅导入语句就导致了崩溃：

类型错误：对象(…(不是函数。定制一个不允许在同一文件中导入静态资产的材质ui主题似乎有一些特别之处。

当我尝试为图像使用url(如上所示(时，总是出现404错误。我的文件结构将图像放在src > static > wood.png中，但我得到了：

http://localhost:3000/static/wood.png404(未找到(。

我尝试了几十种可能的path变体，但都没有成功，我为研究正确的路径所做的所有努力都表明我已经在使用正确的路径。

当背景图像托管在单独的服务器上时，是否只能使用材质UI主题自定义将背景图像添加到主体？

我发现的唯一可行的例子就是这样做的(比如这个：https://codesandbox.io/s/v30yq681ql)，但似乎必须有一种方法来使用本地存储的图像。

或者，如果问题真的是我的相对路径不正确，我该怎么办才能找到正确的路径？

如果有一种更好的方法可以用Material UI向页面添加背景图像，那也可以，尽管除了全局覆盖body标记，我还没有看到其他方法。

Answer 1

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

src/components/wood.png

恢复您的导入，如：

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

然后将backgroundImage放入：

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

这应该行得通。相同的配置(使用不同的文件名，但在相同的位置(对我有效