reactjs v18 Styletron 如何写 before

在 ReactJS v18 中，可以使用 Styletron 来为 ::before 伪元素编写样式。下面是一个示例：

首先，确保已经安装了 Styletron 和 Styletron React 扩展包：

npm install styletron-engine-atomic styletron-react

然后，创建一个 Styletron 引擎实例，并将其传递给 StyletronProvider：

import React from 'react';
import { Provider as StyletronProvider } from 'styletron-react';
import { Client as Styletron } from 'styletron-engine-atomic';

const engine = new Styletron();

function App() {
  return (
    <StyletronProvider value={engine}>
      {/* 在这里写入组件代码 */}
    </StyletronProvider>
  );
}

export default App;

接下来，可以在组件内部使用 styled 函数来创建样式化组件：

import React from 'react';
import { styled } from 'styletron-react';

const StyledDiv = styled('div', {
  '::before': {
    content: '"Before content"',
    color: 'red',
  },
});

function MyComponent() {
  return (
    <StyledDiv>
      Hello World
    </StyledDiv>
  );
}

export default MyComponent;

在上面的示例中，我们使用了 styled 函数来创建一个样式化的 div 组件，并在样式对象中使用 ::before 选择器来定义 ::before 伪元素的样式。在这个例子中，我们添加了一些内容和颜色样式。

这样，当 MyComponent 组件被渲染时，它将显示一个带有红色文本的 div 元素，并且在 div 元素的前面有一个 ::before 伪元素，显示文本 "Before content"。

这就是在 ReactJS v18 中使用 Styletron 编写 ::before 伪元素的方式