React JS and CSS伪元素:: after :: before

问题描述 投票:0回答:1

作为一个React初学者,我目前正在努力使用伪元素:: after和:: before来渲染样式化的组件。

这里是按钮的无礼风格:https://jsfiddle.net/r8qwhfvx/这是我在React中尝试实现的目标:使用伪元素更改悬停时按钮的样式。

例如,如何在按钮组件的className中使用:: after / :: before? JSX语法无法在组件className中使用:: after / :: before。

我只能写这个:

return(
    <button className='infoBtn'></button>
);

请检查jsfiddle链接。

reactjs sass pseudo-element
1个回答
0
投票

className JSX属性是一个字符串变量,当由React呈现时,它将被设置为HTML元素上的class属性值。 CSS伪元素可以出现在CSS代码中,而不是HTML元素的类名。

因此,您需要使用className JSX属性为按钮指定一个类名,然后为该类定义CSS规则。为此,您需要选择一种策略来在React应用程序中设置CSS。有多种解决方案:

使用所有这些选项,您将能够使用CSS伪元素。对于SASS,您可能必须设置CSS预处理器。如果您使用create-react-app或样式化组件,则很好,它是内置的。

祝你好运!

© www.soinside.com 2019 - 2024. All rights reserved.