您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

React中的CSS伪元素

React中的CSS伪元素

在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来创建新元素。如果您不想在所有地方都添加此元素,请制作一个可以为您完成此操作的组件。

对于诸如的特殊属性-webkit-filter,对它们进行编码的方法删除破折号- 并大写下一个字母。这样就变成了WebkitFilter。请注意,这样做{'-webkit-filter': ...}也应该起作用。

CSS 2022/1/1 18:24:59 有354人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶