Css 将flexbox间隙与样式化组件一起使用

我想在我的

Next.js

应用程序中使用flexbox的新gap属性，使用

样式化组件

，而不会失去对Safari的支持。 我找到了这个聚填料，但我很难弄清楚它是否适合在哪里。如果我理解正确，Next支持使用

postss

，但

样式化组件不支持？如何使上面链接的polyfill与这两个组件一起工作

我想编写并在现代平台上支持的代码示例：

display: flex;
flex-direction: row;
gap: 16px;

我发现的代码能够与
Next
一起使用
样式化组件。文件是
\u document.js

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
  const sheet = new ServerStyleSheet();
  const originalRenderPage = ctx.renderPage;

  try {
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          sheet.collectStyles(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {sheet.getStyleElement()}
        </>
      ),
    };
  } finally {
    sheet.seal();
  }
}

是的，NextJS支持样式化组件，用于设置SSR库的_document.js文件的代码是正确的。但我不明白你的实际问题是什么is@tobzilla90为了清晰起见，我进行了编辑，但我的问题基本上是：我如何使用带有样式化组件和next.jsI自己没有使用polyfill和postsss，但是next JS在文档中有一个关于postsss的页面，还有他们的github页面@tobzilla90上的一个示例项目，我已经研究过了，并尝试添加他们描述的插件，但它做了任何事。
module.exports = {
  plugins: {
    autoprefixer: {},
    "flex-gap-polyfill": {},
    "postcss-flexbugs-fixes": {},
    "postcss-preset-env": {
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
      features: {
        "custom-properties": false,
      },
    },
  },
};