0

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

应用程序.css

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

    height: 100%;
    width: 100%;

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

应用程序.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*
}
4

1 回答 1

1

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

于 2021-03-26T18:45:13.557 回答