更改背景组件 - REACTJS

Posted 2023-02-23

【中文标题】更改背景组件 - REACTJS

【英文标题】：Changing Background Component - REACTJS

【发布时间】：2019-03-27 14:31:31

【问题描述】：

我正在尝试更改组件的背景，但它不起作用

这是我的 index.css：

body 
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: url(./styles/image/teste3.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;

该背景完美运行，但我想在访问另一个组件时更改它

所以我创建了一个名为 Portfolio 的组件，当我访问该组件时，它是为了更改背景，但它不起作用

组合 CSS：

.background-portfolio 
  background: url(../image/teste2.jpg) no-repeat center center fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: all 0.5s !important;

Portfolio.js：

componentWillMount()
    document.body.classList.add("background-portfolio");
  

有什么建议吗？ obs：对不起我的英语不好

【问题讨论】：

请确认您的背景网址一次，即 background: url(../image/teste2.jpg) ，因为您之前的图片有 ./styles/image/teste3.jpg

您确定，包含 .background-portfolio 的 css 文件已加载吗？

这应该可以工作（但这与反应无关）。 codepen.io/lipp/pen/yRxZpX

【参考方案1】：

尝试使用 componentDidMount 并尝试将 .background-portfolio 更改为 body.background-portfolio

html

<div id="app"></div>

CSS

body 
  background-color:blue;

body.background-portfolio 
  background-color: red;

JS

class App extends React.Component 
componentDidMount()
  document.body.classList.add("background-portfolio");

render() 
  return (
    <div>
      Hello
    </div>
  )
 


ReactDOM.render(<App />, document.querySelector("#app"))

http://jsfiddle.net/xn43hpov/