Mantine：现代 React UI 库的全面指南

2025-03-03 11:41:26

Mantine 简介

Mantine 是一个用于构建现代 React 应用的 UI 库。它提供了丰富的组件和灵活的主题定制功能，使得开发者能够快速构建美观且功能丰富的用户界面。Mantine 的设计目标是简化 React 应用的开发过程，提高代码的可读性和可维护性。Mantine 支持多种主题、国际化和响应式设计，适用于各种规模的应用程序。

安装配置

Mantine 的安装和配置相对简单，以下是基本步骤：

  1. 安装 Mantine：使用 npm 或 yarn 安装 Mantine 库。
  2. 导入 Mantine 组件：在 React 项目中导入 Mantine 组件。
  3. 配置主题：使用 Mantine 的主题功能进行主题定制。

安装 Mantine

使用 npm 或 yarn 安装 Mantine 库：

npm install @mantine/core @mantine/hooks @emotion/react @emotion/styled

或

yarn add @mantine/core @mantine/hooks @emotion/react @emotion/styled

导入 Mantine 组件

在 React 项目中导入 Mantine 组件。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button } from '@mantine/core';

const App = () => (
  <MantineProvider>
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

配置主题

使用 Mantine 的主题功能进行主题定制。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'blue',
  primaryShade: 6,
  colors: {
    blue: ['#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064'],
  },
});

const App = () => (
  <MantineProvider theme={theme}>
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

基本用法

Mantine 提供了多种基本功能，使得组件的使用更加便捷和高效。以下是一些基本用法示例：

导入组件

使用 Mantine 提供的组件。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, TextInput } from '@mantine/core';

const App = () => (
  <MantineProvider>
    <TextInput label="Your name" placeholder="Enter your name" />
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

使用主题

使用 Mantine 的主题功能进行主题定制。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, TextInput, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'blue',
  primaryShade: 6,
  colors: {
    blue: ['#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064'],
  },
});

const App = () => (
  <MantineProvider theme={theme}>
    <TextInput label="Your name" placeholder="Enter your name" />
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

使用 Hooks

使用 Mantine 提供的 Hooks。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, TextInput, useMantineTheme } from '@mantine/core';

const App = () => {
  const theme = useMantineTheme();

  return (
    <MantineProvider>
      <TextInput label="Your name" placeholder="Enter your name" />
      <Button color={theme.primaryColor}>Click me</Button>
    </MantineProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

组件库

Mantine 提供了丰富的组件库，涵盖了各种常见的 UI 组件。以下是一些常见的组件示例：

按钮（Button）

按钮组件用于触发操作。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button } from '@mantine/core';

const App = () => (
  <MantineProvider>
    <Button>Primary Button</Button>
    <Button variant="outline">Outline Button</Button>
    <Button variant="light">Light Button</Button>
    <Button variant="filled">Filled Button</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

输入框（TextInput）

输入框组件用于输入文本。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, TextInput } from '@mantine/core';

const App = () => (
  <MantineProvider>
    <TextInput label="Your name" placeholder="Enter your name" />
    <TextInput label="Your email" placeholder="Enter your email" />
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

下拉选择（Select）

下拉选择组件用于选择选项。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Select } from '@mantine/core';

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
];

const App = () => (
  <MantineProvider>
    <Select label="Framework" placeholder="Pick one" data={options} />
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

弹出框（Modal）

弹出框组件用于显示模态对话框。以下是一个简单的示例：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, Modal } from '@mantine/core';

const App = () => {
  const [opened, setOpened] = useState(false);

  return (
    <MantineProvider>
      <Button onClick={() => setOpened(true)}>Open Modal</Button>
      <Modal opened={opened} onClose={() => setOpened(false)} title="Reminder">
        Don't forget to subscribe to our newsletter.
      </Modal>
    </MantineProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

通知（Notifications）

通知组件用于显示通知消息。以下是一个简单的示例：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, notifications } from '@mantine/core';

const App = () => {
  const showNotification = () => {
    notifications.show({
      title: 'Notification',
      message: 'This is a notification message',
    });
  };

  return (
    <MantineProvider>
      <Button onClick={showNotification}>Show Notification</Button>
    </MantineProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

主题定制

Mantine 提供了灵活的主题定制功能，使得用户界面的外观更加美观和符合项目需求。以下是一些主题定制示例：

自定义颜色

使用 Mantine 的主题功能自定义颜色。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, TextInput, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'blue',
  primaryShade: 6,
  colors: {
    blue: ['#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064'],
  },
});

const App = () => (
  <MantineProvider theme={theme}>
    <TextInput label="Your name" placeholder="Enter your name" />
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

自定义字体

使用 Mantine 的主题功能自定义字体。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, TextInput, createTheme } from '@mantine/core';

const theme = createTheme({
  fontFamily: 'Arial, sans-serif',
  headings: {
    fontFamily: 'Georgia, serif',
  },
});

const App = () => (
  <MantineProvider theme={theme}>
    <TextInput label="Your name" placeholder="Enter your name" />
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

自定义间距

使用 Mantine 的主题功能自定义间距。以下是一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button, TextInput, createTheme } from '@mantine/core';

const theme = createTheme({
  spacing: { xs: 10, sm: 15, md: 20, lg: 30, xl: 40 },
});

const App = () => (
  <MantineProvider theme={theme}>
    <TextInput label="Your name" placeholder="Enter your name" />
    <Button>Click me</Button>
  </MantineProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

总结

Mantine 是一个功能强大且易于使用的 React UI 库，提供了丰富的组件和灵活的主题定制功能。通过其丰富的组件库和灵活的配置选项，Mantine 能够显著提高 React 应用的开发效率和用户体验。无论是 Web 应用、仪表盘、管理面板还是表单，Mantine 都能提供可靠的解决方案。通过本文的详细介绍，希望读者能够更好地理解和使用 Mantine，提升 React 应用的开发效率和用户体验。

Mantine Logo

mantinedev
mantinedev/mantine
一个功能丰富的 React UI组件库。超过 100+ 组件，和40+hooks能满足你的各种需求。
TypeScript
MIT
28.0 k