时间戳

首页 > 解决方案 > 基于组件更改 React 应用的背景图片

css - 基于组件更改 React 应用的背景图片

问题描述

我四处搜索并尝试了各种解决方案，但似乎无法让我的应用程序正常工作。我希望我的应用程序根据屏幕上呈现的组件显示不同的背景图像。我正在用 React Router 实现这个应用程序，所有样式都是用 Material UI 完成的。

正如其他类似帖子中所建议的那样，我尝试将背景图像单独导入每个组件类并使用 className 来呈现背景图像（尝试如下所示）。但是，当我尝试下面的解决方案时，我似乎无法渲染任何背景图像。事实上，我可以让任何背景图像呈现的唯一方法是通过下面的 App.css 代码。然而，这样做会为整个应用程序设置一个恒定的背景图像，这让我回到了原点。

应用程序.js

class App extends React.Component {
  render() {
    return (
      <div>
        <Router history={history}>
          <NavBar />
          <Route path="/" exact component={Home} />
          <Route path="/contact" exact component={Contact} />
        </Router>
      </div>
    );
  }
}

接下来的两个代码段显示了我尝试根据渲染的组件显示不同的背景图像。

主页.js

import image from "../relative/path.jpeg";

const useStyles = makeStyles((theme) => ({
  home_scene: {
    backgroundImage: `url(${image})`,
  },
}));

const Home = () => {
  const classes = useStyles();

  return (
    <div className={classes.home_scene}>
     .... a lot of code here, left out for readability 
    </div>

联系.js

import image from "../different/image's/relative/path.jpeg";

const useStyles = makeStyles((theme) => ({
  contact_scene: {
    backgroundImage: `url(${image})`,
  },
}));

const Contact = () => {
  const classes = useStyles();

  return (
    <div className={classes.contact_scene}>
     .... a lot of code here, left out for readability 
    </div>

尝试此操作时，我根本无法获得任何背景图像。我可以让任何背景图像显示的唯一方法是执行以下操作，这会在整个应用程序中留下一个静态背景。

应用程序.css

body {
  background: url(/path/to/file) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

也许有一种方法可以根据当前路由使用反应路由器渲染背景图像，但我也不知道该怎么做。任何帮助将不胜感激

标签： cssreactjsmaterial-uibackground-image

解决方案

你可以使用 React Router 的 useLocation 钩子来获取当前 url 并根据它设置背景图像。

https://reactrouter.com/web/api/Hooks/uselocation

推荐阅读