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

Question

作为一名 React 初学者，我目前正在为使用伪元素 ::after 和 ::before 渲染样式组件而苦苦挣扎。

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

但是例如如何在按钮组件的className中使用 ::after / ::before 呢？ JSX 语法无法在组件类名中使用 ::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/) 或 styled-components (https://styled-components.com/docs/faqs#can-i-nest-rules)，那么您可以使用它，它是内置的。对于 styled-components，我不确定它是否是真正的完整版SASS 支持。

祝你好运！