我正在构建React组件。正如React背后的一位专家在本次精彩的演讲中所建议的那样,我已经在组件中添加了CSS内联。我一直在努力寻找一种方法来内联添加CSS伪类,就像在演示文稿中名为“::after”的幻灯片上一样。不幸的是,我不仅需要添加该content:"";属性,还需要添加该属性position:absolute;-webkit-filter: blur(10px) saturate(2);。幻灯片显示了如何通过添加内容{/* … */},但是如何添加其他属性?
content:"";
position:absolute;-webkit-filter: blur(10px) saturate(2);
{/* … */}
在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> ); },
诀窍在于,与其使用::afterCSS来创建新元素,不如通过React来创建新元素。如果您不想在所有地方都添加此元素,请制作一个可以为您完成此操作的组件。
::after
对于诸如的特殊属性-webkit-filter,对它们进行编码的方法是删除破折号- 并大写下一个字母。这样就变成了WebkitFilter。请注意,这样做{'-webkit-filter': ...}也应该起作用。
-webkit-filter
WebkitFilter
{'-webkit-filter': ...}