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 link。

Answer 1

className JSX属性是一个字符串变量，会被设置为class属性HTML 元素在 React 渲染时的值。 CSS 伪元素可以出现在 CSS 代码中，而不是作为 HTML 元素的 class 名称。

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

使用导入到 index.js 或 index.html
在您的 index.html 中使用普通的旧样式元素（这 2 个选项是全局的，就像在普通的 90 年代 Web 开发中一样）
使用 JSX "style" 属性：<Component style={{here put CSS object}} />：https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
使用 CSS 模块（如果您正在使用 create-react-app）：https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
使用 styled-components or any other CSS-in-JS option, there is a lot of solutions，我提到样式组件是因为它是最流行的组件之一

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

祝你好运！

React JS and css pseudo element ::after ::before