Как переопределить цвет фона по умолчанию 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;