授權

MUI X 是一個開放核心、MIT 授權的函式庫。購買商業授權以取得進階功能和支援。

MIT 與商業授權比較

MUI X 團隊自 2014 年以來一直在建構 MIT 授權的 React 元件，從 Material UI 開始，我們致力於持續推進我們的開放原始碼函式庫。我們在 MIT 授權下發布的任何內容都將永遠保持 MIT 授權。深入了解我們的管理理念。

我們為需要最先進的元件和功能（這些元件和功能無法僅由開放原始碼社群合理維護）的開發人員提供商業授權。這些授權使我們有可能支援全職員工工程師團隊。

請放心，當我們商業發布功能時，僅僅是因為我們相信您在其他任何地方都找不到更好的 MIT 授權替代方案。

請參閱定價頁面以取得詳細的功能比較。

方案

社群方案

免費的 MUI X 社群版包含我們認為可透過開放原始碼社群的貢獻來維護的元件和功能。它以 MIT 授權發布，並且永久免費。

Pro 方案

MUI X Pro 在社群版的基礎上擴展了更進階的功能。Data Grid Pro 隨附多重篩選、多重排序、欄位調整大小和欄位釘選功能；您還可以存取 Date and Time Range Picker 元件、進階圖表以及 Tree View 的拖放重新排序功能。

Pro 版本在商業授權下提供—請造訪定價頁面以取得詳細資訊。獨家功能在整個文件中都標有圖示。

Premium 方案

MUI X Premium 解鎖 Data Grid 最進階的功能，包括列分組和 Excel 匯出，以及 Pro 方案中提供的所有功能。

Premium 版本在商業授權下提供—請造訪定價頁面以取得詳細資訊。獨家功能在整個文件中都標有圖示。

@mui/x-data-grid-premium

升級

任何指定方案的 npm 套件都是社群版中套件的超集。若要升級，您必須安裝各自的付費套件，並將所有匯入路徑替換為新路徑。

以下是以 Data Grid 為例的升級情境

從社群版升級到 Pro 版

@mui/x-data-grid-pro 是 @mui/x-data-grid 的超集。安裝 Pro 套件，然後相應地更新所有匯入

-import { DataGrid } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';

從 Pro 版升級到 Premium 版

@mui/x-data-grid-premium 是 @mui/x-data-grid-pro 的超集。安裝 Premium 套件，然後相應地更新所有匯入

-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';

如需更多關於如何安裝每個套件的詳細資訊，請造訪套件安裝指南。

評估（試用）授權

根據最終使用者授權協議，您可以將 Pro 和 Premium 元件用於非生產環境，無需商業授權，為期 30 天。您也可以將其用於非生產用途的程式碼開發（例如，重現問題、進行基準測試）。

在上述情況下使用這些元件，您無需聯絡我們。您需要購買商業授權才能移除浮水印和主控台警告。

我需要多少個開發人員授權？

購買的授權數量必須與同時對使用 MUI X Pro 或 Premium 的專案前端程式碼做出變更的開發人員數量相對應。

範例 1. 公司「A」正在開發名為「AppA」的應用程式。該應用程式需要在表格中呈現 1 萬列資料，並允許使用者進行分組、篩選和排序。開發團隊將 MUI X Pro 新增到專案中以滿足此需求。「AppA」專案有五名前端開發人員和十名後端開發人員。只有一名開發人員負責維護 Data Grid，但共有五名開發人員從事前端工作。公司「A」必須購買五個授權。
範例 2. 公司「B」的 UI 開發團隊為內部開發建立了自己的 UI 函式庫，其中包括 MUI X Pro 元件。從事「AppY」和「AppZ」專案的團隊都採用了這個新的函式庫。「AppY」有五名前端開發人員，「AppZ」有三名前端開發人員；此外，公司 UI 開發團隊還有兩名前端開發人員。公司「B」必須購買十個授權。

這是 EULA 中的相關條款。

授權金鑰

當您購買商業授權時，您將透過電子郵件收到授權金鑰。此金鑰會移除所有浮水印和主控台警告。

如何安裝金鑰

授權金鑰取決於一個名為 @mui/x-license 的套件，該套件會驗證金鑰是否已啟用。取得授權金鑰後，從該套件匯入 LicenseInfo 方法並呼叫 setLicenseKey() 函數

import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

您只需在您的應用程式中執行此操作一次。

在哪裡安裝金鑰

您必須在 React 呈現應用程式中的第一個元件之前呼叫 setLicenseKey() 函數。

它的套件大小相對較小，因此在您的所有套件中呼叫它應該沒有問題，無論是否呈現商業 MUI X 元件。

Next.js 整合

Next.js App Router

當使用 Next.js App Router 時，您有多種選項可以安裝授權金鑰。

如果您的 layout.js 正在使用 'use client'，您可以在其中設定授權金鑰

'use client';
import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

否則（建議），您可以建立一個名為 MuiXLicense.tsx 的虛擬元件

'use client';
import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

export default function MuiXLicense() {
  return null;
}

並在您的 layout.js 中呈現 <MuiXLicense>

import MuiXLicense from './MuiXLicense';

export default function RootLayout(props: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {props.children}
        <MuiXLicense />
      </body>
    </html>
  );
}

Next.js Pages Router

當使用 Next.js 頁面時，呼叫 setLicenseKey 的絕佳位置是在 _app.js 中。

import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

export default function MyApp(props) {
  const { Component, pageProps } = props;
  return <Component {...pageProps} />;
}

使用 Next.js 的環境變數

授權金鑰在伺服器端和用戶端都會進行驗證，因此您必須將環境變數公開給瀏覽器。若要執行此操作，您需要以 NEXT_PUBLIC_ 為環境變數加上前綴，如 Next.js 文件中所述

import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_X_LICENSE_KEY);

金鑰的用途是什麼？

授權金鑰旨在協助您遵守商業授權的 EULA。雖然每位開發人員都需要獲得授權，但授權金鑰在每個專案中設定一次，元件在其中使用。

授權金鑰安全性

授權金鑰的檢查無需發出任何網路請求—它被設計為公開的。授權金鑰預期會在 JavaScript 套件中公開；我們只是要求獲得授權的使用者不要主動公開其授權金鑰。

驗證失敗

如果授權金鑰的驗證失敗，元件會在開發和生產環境中顯示浮水印並提供主控台警告。終端使用者仍然可以使用該元件。

以下是不同的可能驗證錯誤

1. 缺少授權金鑰

此錯誤表示您的授權金鑰遺失。您可能未獲准使用該軟體。元件看起來會像這樣

若要解決此問題，您可以查看免費試用條件，如果您符合資格，則無需採取任何行動。如果您不符合免費試用資格，則需要購買授權或立即停止使用該軟體。

2. 套件版本過期

此錯誤表示您已安裝在您的授權期限結束後發布的 MUI X Pro / Premium 版本。預設情況下，商業授權提供對購買後第一年內發布的新版本的存取權。

若要解決此問題，您可以續訂您的授權或安裝與您的授權金鑰相容的較舊版本的 npm 套件。

例如，如果您今天購買一年授權，您將能夠更新到未來十二個月內發布的任何版本（包括主要版本）。

3. 授權金鑰過期

此錯誤表示您的年度授權金鑰已過期。

年度授權在生產環境中永久有效，適用於在您的授權期限結束之前發布的任何版本的 MUI X Pro / Premium。但是，當期限結束時，您不得在開發環境中使用目前或舊版本。

若要解決此問題，您可以續訂您的授權或停止對依賴 MUI X API 的程式碼進行變更。

4. 授權金鑰方案不符

此錯誤表示您對 MUI X 的使用與您的授權金鑰方案不相容。您嘗試使用的功能未包含在您的授權金鑰方案中。如果您嘗試將 Data Grid Premium 與 Pro 方案的授權金鑰一起使用，就會發生這種情況。

若要解決此問題，您可以將您的方案從 Pro 升級到 Premium。或者，如果您不打算使用 Premium 功能，您可以將 @mui/x-data-grid-premium 的匯入替換為 @mui/x-data-grid-pro。

5. 您的授權中未包含元件

此錯誤表示您嘗試使用的元件不在您目前授權的範圍內。如果您嘗試將 ChartsPro 或 TreeViewPro 與不涵蓋這些產品的授權一起使用，就會發生這種情況。

若要解決此問題，請考慮提早續訂。

如果您有有效的 Pro 授權，您可能有資格獲得折扣。請聯絡 sales@mui.com 以取得更多資訊。

或者，如果您不打算使用 Pro 功能，您可以將 @mui/x-charts-pro 或 @mui/x-tree-view-pro 的匯入分別替換為 @mui/x-charts 或 @mui/x-tree-view。

6. 無效的授權金鑰

此錯誤表示您的 MUI X 授權金鑰格式無效。可能是因為授權金鑰缺少字元或有錯字。

若要解決此問題，您需要仔細檢查是否使用正確的引數呼叫了 setLicenseKey()。請查看授權金鑰安裝。

7. 無效的授權金鑰 (TypeError: extracting license expiry timestamp)

以下 JavaScript 例外狀況表示您可能正在嘗試在較舊版本的 npm 套件上驗證新授權的金鑰格式。

若要解決此問題，您可以將 MUI X 更新到 v5.11.0 或更高版本，或聯絡支援部門以取得舊版授權金鑰。