如何将内联样式和 className 应用到同一元素

Question

我有一个 div，它有一个相当长的样式列表，内联应用这些样式看起来很荒谬，但是，div 接受一个背景图像 url 的参数，该参数会在更新状态时发生变化。

内联样式，我的元素如下所示：

      <div style={{width: 55,
                  height: 55,
                  position: 'fixed',
                  borderRadius: '50%',
                  bottom: 130,
                  zIndex: 200,
                  backgroundImage: `url(${this.state.avatar})`}}>

但是，当我这样做时，我的背景图像完全消失：

<div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>

这里的修复是什么？

Answer 1

我创建了一个示例项目并create-react-app使用了以下代码，它对我有用：

App.js：

import React, {Component} from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {avatar: 'https://www.gstatic.com/webp/gallery3/1.png'}
  }

  render() {
    return (
      <div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>
        something here...
      </div>
    );
  }
}

export default App;

还有App.css：

.avatar {
  width: 500px;
  height: 500px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
}