Css 我只想将背景图像应用于一个组件的主体

我是个新手，所以要提前为我的错误道歉

在我的React应用程序中，假设我有2个组件，由于CSS样式是全局的，它从所有文件中拾取CSS样式

但是，我希望将完整的背景图像添加到其中一个组件中，我可以通过在CSS文件中使用以下代码来实现：

body {
  background-image: url("../image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

问题是相同的图像也应用于另一个组件。我读了一些答案，发现我可以使用ComponentDidMountHook将图像添加到body标签中。我试过了，但什么也看不出来

  componentDidMount() {
    document.body.style.backgroundImage = "url('../image.jpg')";
    document.body.style.backgroundPosition = "center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
  }

编辑

---

我意识到我对这个问题的措辞是错误的。我想说的是我有两页要写。对于其中一页，我想要一个完整的背景图像。但是，由于CSS样式是全局的，因此背景图像将应用于所有页面。

您可以通过为一个组件的顶部元素指定特定的类或ID来使用内联样式或特定样式

内联样式示例：

//如果背景变量具有指向背景图像的url。
常量样式={
backgroundImage:`url（${Background}）`
}
//在组件中使用该内联样式
返回(
);通过为一个组件的顶部元素指定特定的类或ID，可以使用内联样式或特定样式

内联样式示例：


//如果背景变量具有指向背景图像的url。
常量样式={
backgroundImage:`url（${Background}）`
}
//在组件中使用该内联样式
返回(
);组件通常返回一些jsx，在大多数情况下还返回一个
div
。换句话说，要将css应用于单个组件，我指的是组件正在呈现的jsx。您应该定义一个css类，将背景图像应用于组件正在渲染的div，并将
div的高度设置为窗口高度。您可以通过内联css all实现这一点



常量MainDiv=（）=>(
这将显示覆盖整个身体的背景图像
//页面的其他内容可以像页面的其他内容一样添加到此处
这是我的博客
这是我的导航栏
);
render（，document.getElementById（“根”））
.testClass{
背景图片：“url（'../image.jpg'）”；
背景位置：“中心”；
背景重复：“不重复”；
背景尺寸：“封面”；
宽度：100%；
高度：100vh
}
组件通常返回一些jsx，在大多数情况下返回一个
div
。换句话说，要将css应用于单个组件，我指的是组件正在呈现的jsx。您应该定义一个css类，将背景图像应用于组件正在渲染的div，并将
div的高度设置为窗口高度。您可以通过内联css all实现这一点



常量MainDiv=（）=>(
这将显示覆盖整个身体的背景图像
//页面的其他内容可以像页面的其他内容一样添加到此处
这是我的博客
这是我的导航栏
);
render（，document.getElementById（“根”））
.testClass{
背景图片：“url（'../image.jpg'）”；
背景位置：“中心”；
背景重复：“不重复”；
背景尺寸：“封面”；
宽度：100%；
高度：100vh
}
组件的“主体”是什么意思？在CSS中，“body”指的是
HTML标记，每页只有一个。它并不是指一个特定的组件。您是想在正文中添加背景，还是想在特定组件中添加背景。例如，
关于组件的背景信息
或
页脚组件的背景信息
请发布组件的代码及其呈现方式。它想做什么？期望的行为是什么？DOM树中只有一个
body
标记实例。那么，两个实例如何在body标签上呈现相同的图像呢？为了清晰起见，我对摘要进行了编辑。对不起，措辞不正确。好的，当你说CSS样式是全局的时，你是什么意思？每个组件都应该将样式定位到自身。我会避免在body标签上设置bg图像，而是让组件呈现
position:fixed的元素；排名：0；左：0；底部：0；右：0带有
z-index:0
，因此它位于正常内容或类似内容的下面。如果你想发布一个代码沙盒或复制问题的东西，我很乐意帮助你解决它。尽管目前的信息很难帮助您，但您认为组件的“主体”是什么意思？在CSS中，“body”指的是
HTML标记，每页只有一个。它并不是指一个特定的组件。您是想在正文中添加背景，还是想在特定组件中添加背景。例如，
关于组件的背景信息
或
页脚组件的背景信息
请发布组件的代码及其呈现方式。它想做什么？期望的行为是什么？DOM树中只有一个
body
标记实例。那么，两个实例如何在body标签上呈现相同的图像呢？为了清晰起见，我对摘要进行了编辑。对不起，措辞不正确。好的，当你说CSS样式是全局的时，你是什么意思？每个组件都应该将样式定位到自身。我会避免在body标签上设置bg图像，而是让组件呈现
position:fixed的元素；排名：0；左：0；底部：0；右：0带有
z-index:0
，因此它位于正常内容或类似内容的下面。如果你想发布一个代码沙盒或复制问题的东西，我很乐意帮助你解决它。很难帮助，虽然与目前的信息，这将只适用于该分区的图像。我希望图像覆盖整个页面