作为一个React初学者,我目前正在努力使用伪元素:: after和:: before来渲染样式化的组件。
这里是按钮的无礼风格:https://jsfiddle.net/r8qwhfvx/这是我在React中尝试实现的目标:使用伪元素更改悬停时按钮的样式。
例如,如何在按钮组件的className中使用:: after / :: before? JSX语法无法在组件className中使用:: after / :: before。
我只能写这个:
return(
<button className='infoBtn'></button>
);
请检查jsfiddle链接。
className JSX属性是一个字符串变量,当由React呈现时,它将被设置为HTML元素上的class属性值。 CSS伪元素可以出现在CSS代码中,而不是HTML元素的类名。
因此,您需要使用className JSX属性为按钮指定一个类名,然后为该类定义CSS规则。为此,您需要选择一种策略来在React应用程序中设置CSS。有多种解决方案:
<Component style={{here put CSS object}} />
:https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/使用所有这些选项,您将能够使用CSS伪元素。对于SASS,您可能必须设置CSS预处理器。如果您使用create-react-app或样式化组件,则很好,它是内置的。
祝你好运!