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

【问题标题】：How To Apply Inline Style and className to Same Element如何将内联样式和类名应用于同一元素
【发布时间】：2018-08-01 17:44:33
【问题描述】：

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

这里有什么解决办法？

【问题讨论】：

.avatar 类是否指定了 width 和 height？
您正在将引号添加到他们不应该有的 url。我会先尝试删除那些。其次，内联样式是魔鬼。根据经验，您不应该将它们添加到 html 中。为什么不添加样式表？
@ElijahTate OP 有一个条件 backgroundImage
这正是我的观点。 “头像”在样式表中定义，但背景图像 url 将在状态更改时更新。引号没有错，它们内联工作得很好，这是正确的 ES6 做事方式。问题是两者一起使用。
@varinder 是的，.avatar 具有上一个示例中内联的所有样式。

标签： javascript html css reactjs

【解决方案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;
}

【讨论】：

谢谢，但它仍然无法正常工作。 Quadruple 检查了错误和拼写错误，但没有成功。不知道为什么这对我不起作用。
您使用的是哪种样板？你的 Webpack 会影响 css 的吗？
创建反应应用程序
并没有接触过webpack模块。
你能不能新建一个项目，先测试一下上面的代码。

【解决方案2】：

@salman.zare 对我发布的问题的回答是 100% 正确，但是，我发现的问题与结合 className 和内联样式没有任何关系。问题是我的 div 容器对于图像来说太小了，50px。这是我添加使其工作的：background-size: contain;

所以：

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

如果使用 no-repeat: background-size: 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;
}

【讨论】：