Javascript 如何将内联样式和类名应用于同一元素

我有一个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})`}}>

---

这里的修复方法是什么？

我使用

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;

---

@salman.zare的回答对我发布的问题是100%正确的，然而，我发现这个问题与组合类名和内联样式无关。问题是我的div容器对于图像50px来说太小了。我添加了以下内容以使其正常工作：

backgroundsize:contain

因此：

如果使用“无重复”，这也可以工作，并且不会切断图像的底部：背景大小：100%100%

.avatar {
  width: 55px;
  height: 55px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

是否指定了
.avatar
类的
宽度
和
高度
？您正在向url添加他们不应该添加的引号。我会试着先把它们去掉。其次，内联风格是魔鬼。根据经验，不应该将它们添加到html中。为什么不添加一个样式表呢？@ElijahTate OP有一个有条件的
backgroundImage
，这正是我的观点。“化身”在样式表中定义，但背景图像url将在状态更改时更新。引号没有问题，它们只是内联工作，这是正确的ES6方式。问题是两者同时使用。@Varider是的，.avatar拥有上一个示例中内联的所有样式。谢谢，但它仍然不起作用。四倍检查错误和打字错误，但没有成功。不知道为什么这在我这边不行。你用的是哪种样板？你的网页是否会影响css？你是否还没有接触过网页模块。你能否先创建一个新的项目并测试上面的代码。
.avatar {
  width: 50px;
  height: 50px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: contain;
}

.avatar {
  width: 55px;
  height: 55px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}