如何用图像覆盖 ChakraUI 默认背景颜色

Question

我刚刚开始使用 Chakra UI，我对如何覆盖它们的默认主题感到非常困惑。特别是背景图像。当我将 ChakraProvider 添加到我的主应用程序时，它会为页面主体设置默认的白色背景，并且会忽略我在 App.css 中设置的我自己的背景图片有人知道如何覆盖它吗？

App.css

body {
    background-image: url("./images/forest.jpg");

    height: 100%;
    width: 100%;

    background-position: center;
    background-size: cover;
}

App.js

class App extends Component {
  render() {
    return (
      <ChakraProvider resetCSS={false}>
        <Provider store={store}>
          <Router>
            <div>
              *routes here*
            </div>
          </Router>
        </Provider>
      </ChakraProvider>
    );
  }
}

export default App;

这是检查员在网页上显示的内容。标有删除线的是被忽略的。如果chakra-ui默认提供的背景是白色取消勾选属性，我的背景图就会出现

body {
    font-family: var(--chakra-fonts-body);
    color: var(--chakra-colors-gray-800);
    background: var(--chakra-colors-white);
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    line-height: var(--chakra-lineHeights-base);
}
body {
    background-image: url(/static/media/forest.04032f88.jpg); *strikethrough*
    height: 100%;
    width: 100%;
    background-position: center; *strikethrough*
    background-size: cover; *strikethrough*
}

Answer 1

将“!important”放在末尾。例如：- background-image: url("./images/forest.jpg") !important;

如何用图像覆盖 ChakraUI 默认背景颜色

How to override ChakraUI default background color with an image

css

reactjs

chakra-ui