从变量填充时反应jsx内联样式不呈现答案

【问题标题】：react jsx inline style not rendering when populated from a variable从变量填充时反应jsx内联样式不呈现
【发布时间】：2022-01-31 02:12:15
【问题描述】：

我在 React 组件中的 div 标签中添加了一个内联样式元素以及一个 className 元素。 className 属性呈现，但样式未显示。我从一个对象变量设置。但是，如果我直接使用双花括号设置样式元素，它可以工作，只是不能从变量工作。

这是我用来设置样式元素的对象值的图像。

这显示了在渲染组件时应该在哪里设置样式元素，此时 styleElement 对象有一个值设置

这显示了组件渲染后并且样式元素不存在

即使样式元素是从包含 CSS 属性的对象填充的，什么会阻止呈现？

【问题讨论】：

请分享您的组件代码以及您使用它的位置。
背景样式语法是正确的，不是答案中提到的问题。如果您不共享代码，我们将无法提供帮助。
@MohamedEl-Refaie 我认为你错了。问题是 React 不支持使用!important:Here's the source for that。 OP 的背景样式语法在使用纯 HTML 时可能是正确的，但对于 React 和使用 React 组件中的 style 属性时则不然。
@Kapobajza 是的，你是对的。经过一番研究，我发现添加 !important 会导致样式的背景抑制。

【解决方案1】：

您的问题似乎出在!important 部分。在样式对象中使用!important 响应doesn't support。如果您可以摆脱 !important 部分，那将是最好的，但如果您不能，那么这里有一个解决方法（取自 this SO answer）：

<div
  ref={(node) => {
    if (node) {
      node.style.setProperty('background', `url(${imageUrl}) no-repeat 50% 40%`, 'important');
    }
  }}
/>

【讨论】：

【解决方案2】：

我相信!important 是这里的罪魁祸首。只需将其删除，所有内容都应使用内部变量进行渲染。

作为一般规则，内联 CSS 会覆盖样式表中的任何 CSS，假设具有相同级别的特殊性。

【讨论】：

【解决方案3】：

为此使用 ES6。

background: `url(${imageUrl}) no-repeat`

【讨论】：

【解决方案4】：

背景图片语法是

background-image: url("img_tree.gif");

您在文件名之间缺少"。改为

{ background: 'url("' + imageUrl + '") no-repeat 50% 40% !important' }

您可能要检查的另一件事是确保 img_tree.gif 实际上是正确的路径，通常应该是相对路径或绝对路径，例如 ./img_tree.gif 或 http://example.com/img_tree.gif

还要确保有背景尺寸

background-size: cover

【讨论】：

【解决方案5】：

关于!important的规则

我认为你可能需要在 jsx 中导入路径

// require also works
background:`url(${import("./images/your_image")}) no-repeat 50% 40%`

如果还是不行，试试这个：

 style={{
      backgroundImage: `url(${require('./images/your_image')})`,
      backgroundRepeat: 'no-repeat',
    }}

【讨论】：

【解决方案6】：

在imageURL周围添加"

{ background: "url(\"" + imageUrl + "\") no-repeat ..."}

【讨论】：