如何用图像覆盖 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

把“！重要”放在最后。例如：-background-image: url("./images/forest.jpg") !important;