在 CSS 中动态格式化样式答案

【问题标题】：Dynamically format styles in CSS在 CSS 中动态格式化样式
【发布时间】：2019-11-13 10:51:39
【问题描述】：

我正在尝试通过 CSS 在列中显示图标而不是其文本。但是，我一直无法为这段代码找到正确的语法。

我的 reactjs 代码有：


return '<div><span class="fa fa-2x fa-star" style="display : [' + item.Status + ' == approved] ? block: none"></span></div>';    
}

这导致下面的代码不起作用：

<div>
<span class="fa fa-2x fa-star" style="display : [submitted == approved] ? block: none"></span>
</div>

在上述情况下，当 "submitted" != "approved" 时，理想情况下不应该显示图标，但星形图标会显示在每一行中（无论值是否匹配）。

在 chrome 中，我也尝试了以下代码和许多类似的格式，但它们都不起作用：

我的要求是图标应该只有在 LHS 值和 RHS 值匹配时才可见，例如：“approved”=“approved”。

对我有用的解决方案是：

var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.

return '<div><span class=" '+ cssClass + '" </span></div>';    
}

【问题讨论】：

标签： html css reactjs styles

【解决方案1】：

你试试这个：

displayStyle = submitted == approved ? 'block': 'none';
return (
    <div>
        <span class="fa fa-2x fa-star" style={{ display: displayStyle }}></span>
    </div>
)

【讨论】：

我修改了代码以适应您的格式，它返回 [object Object]。代码如下： render: function (data, type, item, meta) { var displayStyle = item.Status == "approved" ? '块'：'无';返回 (

)} }
虽然这不是答案，但它让我有了一个想法，并且那篇文章奏效了。

【解决方案2】：

对我有用的代码：

var cssClass = item.Status = "approved" ? "fa fa-2x fa-star" : "myblankcssclass" ; //add various classes using ternary operator.

return '<div><span class=" '+ cssClass + '" </span></div>';    
}

【讨论】：