在React团队得到了@Vjeux的回复:
普通HTML / CSS:
<div class="something"><span>Something</span></div>
<style>
.something::after {
content: '';
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>
以内联样式进行反应:
render: function() {
return (
<div>
<span>Something</span>
<div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
</div>
);
},
诀窍在于,与其使用::after
CSS来创建新元素,不如通过React来创建新元素。如果您不想在所有地方都添加此元素,请制作一个可以为您完成此操作的组件。
对于诸如的特殊属性-webkit-filter
,对它们进行编码的方法是删除破折号- 并大写下一个字母。这样就变成了WebkitFilter
。请注意,这样做{'-webkit-filter': ...}
也应该起作用。