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

Question

作为React的新手，我目前正在努力使用伪元素:: after和:: before来渲染样式化的组件。

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

但是如何在按钮组件的className中使用:: after / :: before？ JSX语法无法在组件className中使用:: after / :: before。

我只能写这个：

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

请检查jsfiddle链接。

Answer 1

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

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

• 使用在您的index.js或index.html中导入的普通CSS旧文件
• 在index.html中使用普通的旧样式元素（这两个选项是全局的，就像90年代普通的Web开发一样）
• 使用JSX“样式”属性：<Component style={{here put CSS object}} />：https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
• 使用CSS modules（如果您使用的是create-react-app）：https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
• 使用styled-components或任何其他CSS-in-JS选项，有a lot of solutions，我提到了样式组件，因为它是最受欢迎的组件之一

使用所有这些选项，您将能够使用CSS伪元素。对于SASS，您可能必须设置CSS预处理器。如果您使用的是create-react-app（https://create-react-app.dev/docs/adding-a-sass-stylesheet/）或样式组件（https://styled-components.com/docs/faqs#can-i-nest-rules），那么它是内置的。对于样式组件，我不确定是否是真正的完整SASS支持。

祝你好运！