mantine: 配置使用

安装 js 包

# 核心组件
yarn add @mantine/core @mantine/hooks
# icons
yarn add @tabler/icons-react

在 App.tsx 中加入这个

// core styles are required for all packages
import '@mantine/core/styles.css';

// other css files are required only if
// you are using components from the corresponding package
// import '@mantine/dates/styles.css';
// import '@mantine/dropzone/styles.css';
// import '@mantine/code-highlight/styles.css';
// ...

如果加在 style 中，记得加在第一行 (nextjs中会有这个配置)

@import '@mantine/core/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

// ....

这个通常在 src/page.tsx 中

import Image from "next/image";
import { Button, createTheme, MantineProvider } from '@mantine/core';
import { Alert } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';

const theme = createTheme({
  /** Put your mantine theme override here */
});

export default function Home() {
  return (
    <MantineProvider theme={theme}>
      <div className="container mx-auto my-10 p-5 wp-8 debug y-2">
        <h1 className="text-5xl font-bold text-center">Welcome to Next.js + Mantine.js</h1>
        <Image src="/next.svg" alt="Logo" width={200} height={200} />
        <Alert variant="light" color="blue" title="Alert title" icon={<IconInfoCircle size={18} />}>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. At officiis, quae tempore necessitatibus placeat saepe.
        </Alert>
        <Button>Click me</Button>
      </div>
    </MantineProvider>
  );
}