next.js 使flexbox gap在旧版本的浏览器中可用

smtd7mpg 于 2023-03-18 发布在其他

关注(0)|答案(2)|浏览(339)

我在旧版本的浏览器中遇到了一些flexbox gap（不工作）的问题，建议使用stylis. https://www.npmjs.com/package/stylis
我试图找出文档，但我挣扎。我想我需要创建一个定制插件？我遵循了一些情绪的文档，然后卡住了。有人能帮助我吗？

我的背景：使用Next.js和Mantine库（使用情感）
感觉我什么都试过了，我经验不足，所以我肯定错过了一些明显的东西。

next.js

来源：https://stackoverflow.com/questions/74207408/make-flexbox-gap-available-in-older-versions-of-browsers

2条答案

按热度按时间

zfciruhq1#

Flex Gap不支持Safari版本〈14.1和iOS Safari版本〈14.5，但在mantine组件中使用（@mantine/core v5）：

旋转木马：indicators: {gap: 8}
组别：root: { gap: theme.fn.size({ size: spacing, sizes: theme.spacing }) }-固定
堆栈：root: { gap: theme.fn.size({ size: spacing, sizes: theme.spacing }) }-固定
选项卡（选项卡列表）：tabsList: {... if (variant === 'pills') { return { gap: theme.spacing.sm / 2, }; } ... }-固定
日历（日历基准）：calendarBase: {gap: theme.spacing.md}
解决方法：组和堆栈组件是大多数Mantine组件的基础。Flex组件不使用全局配置样式，而是用于它们的演示，所以不要在代码库中使用它。

对于fix组和堆栈组件，将以下代码添加到提供程序中的config：

const themeConfig: MantineThemeOverride = {
  components: {
    Group: {
      styles: (theme: MantineTheme, { spacing }: GroupStylesParams) => {
        return {
          root: {
            gap: 0,
            marginRight: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
            marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
            '> *': {
              marginRight: theme.fn.size({ size: spacing, sizes: theme.spacing }),
              marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
            },
          },
        };
      },
    },
    Stack: {
      styles: (theme: MantineTheme, { spacing }: StackStylesParams) => {
        return {
          root: {
            gap: 0,
            marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
            '> *': {
              marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
            },
          },
        };
      },
    },
    Tabs: {
      styles: (theme, { variant, color }: TabsStylesParams) => {
        const filledScheme = theme.fn.variant({ color, variant: 'filled' });
        let tabStyles = {};
        let tabListStyles = {};

        if (variant === 'pills') {
          const spacing = theme.spacing.sm; // In mantine is hardcoded now (https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Tabs/TabsList/TabsList.styles.ts#L46)
          tabListStyles = {
            gap: 0,
            marginRight: -spacing,
            marginBottom: -spacing,
            '> *': {
              marginRight: spacing,
              marginBottom: spacing,
            },
          };
        }

        return {
          tab: tabStyles,
          tabsList: tabListStyles,
        };
      },
    },
  },
}

已知限制

当使用margin: auto或背景时，或者当您需要在容器和下一个元素之间留出一些空间时，必须使用 Package 器div。当某些代码计算scrollHeight时，这也可能会有问题-它将比预期的间隙大小大（底部的间距，尽管它被父负值吸收，但仍将计算）。
如果容器不是父容器的全宽，则间距百分比不可靠
由于容器上的负边距，带百分比的Flex项目宽度与规格略有不同。
高级方法：你可以使用modernizr config给html元素添加自定义类，这样你就可以只对不支持flex gap的浏览器应用回退值。

modernizr-config.json

{
  "classPrefix": "_",
  "enableClasses": true,
  "enableJSClass": true,
  "scriptGlobalName": "window",
  "usePrefixes": true,
  "minify": true,
  "options": [
    "addTest",
    "testProp",
    "setClasses"
  ],
  "feature-detects": [
    "css/flexgap",
  ]
}

package.json

"scripts": {
 "compile-modernizr": "modernizr -c modernizr-config.json -d ./public/static/scripts/modernizr-bundle.min.js"
}

_文件.tsx

<body>
  <Main />
  <NextScript />
  <Script src="/static/scripts/modernizr-bundle.min.js" strategy="beforeInteractive" />
</body>

在此之后，像这样更改您的主题配置

Group: {
      styles: (theme: MantineTheme, { spacing }: GroupStylesParams) => {
        return {
          root: {
            '._no-flexgap &': {
              gap: 0,
              marginRight: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
              marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
            },
            '._no-flexgap & > *': {
              marginRight: theme.fn.size({ size: spacing, sizes: theme.spacing }),
              marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
            },
          },
        };
      },
    },
    Stack: {
      styles: (theme: MantineTheme, { spacing }: StackStylesParams) => {
        return {
          root: {
            '._no-flexgap &': {
              gap: 0,
              marginBottom: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
            },
            '._no-flexgap & > *': {
              marginBottom: theme.fn.size({ size: spacing, sizes: theme.spacing }),
            },
          },
        };
      },
    },

在其他情况下也是类似的。所以，通过这个可选的回退，你总是在你的元素周围使用一个额外的 Package 器（一个div），它使用gap来获得最好的向后兼容性。我希望这对你有帮助！

赞(0）回复(0）举报 2023-03-18

eh57zj3b2#

flexbox差距属性在in older browsers上不起作用（正如你在评论中所说的），正如@apokryfos在评论中建议的，你可以使用边距。

赞(0）回复(0）举报 2023-03-18