Tailwind 预检后加载 mantine 样式

Question

我试图同时使用 Mantine 和 Tailwind，但是 Tailwind 的“飞行前”基本样式会覆盖 Mantine 的，导致一个简单的按钮不可见。

您可以禁用预检：

  corePlugins: {
    preflight: true
  }

但我宁愿保持启用状态并根据此建议加载 Mantine CSS 。

有什么办法可以指定这个顺序吗？

Answer 1

createEmotionCache使用Mantine 核心创建 Emotion 缓存，并设置prepend为false. MantineProvider然后，在的prop中调用它emotionCache：

import {
  MantineProvider,
  createEmotionCache
} from '@mantine/core';

const myCache = createEmotionCache({
  key: 'mantine',
  prepend: false
});

<MantineProvider emotionCache={myCache}>{children}</MantineProvider>