A React Dashboard Template with Robust MUI Components

Uko React Admin Dashboard Template

Professional React dashboard template with robust MUI components. Its clean codebase and design significantly reduce development costs, time, and effort.

Features and Pages

• JWT authentication
• React Router
• React Hooks
• Lazy loading components
• Code splitting
• Dashboard
• Users
  • User Profile
  • User List
  • User Grid
  • Add User
• UI kits
  • MUI components
• Session pages
  • Sign in
  • Sign up

Free vs Pro

Download

Download From official website 
Browse Documentation

Download details:

Author: suthicha-step
Source code: https://github.com/suthicha-step/uko-react

License: MIT license

#react #mui 

MUIとNext.jsの使用を開始する

プロジェクトをできるだけ早く開始することは、ビジネスとプライベートの両方のコンテキストで、Web開発において非常に重要な要素になる可能性があります。そのため、Next.jsのようなフレームワークやMUIのようなライブラリは非常に人気があり便利です。

このブログ投稿では、MUIを使用してNext.jsを設定するプロセスについて説明します。

具体的なセットアップを見る前に、まずNext.jsとMUIとは何か、そしてセットアップが他のシナリオでMUIを使用する場合と異なる場合がある理由を説明しましょう。

MUIとは何ですか？

MUI（以前のマテリアルUI）は、Googleのマテリアルデザインシステムを実装する、非常によく文書化されたコンポーネントのライブラリです。このライブラリはオープンソースであるため、完全にカスタマイズ可能です。箱から出してすぐに、MUIはボタン、アラート、メニュー、テーブルなどの本番環境に対応したコンポーネントを提供します。

MUIのドキュメントをチェックして、MUIが提供するものの概要を確認してください。

Next.jsとは何ですか？

Next.jsは、Reactを使用して完全に機能するWebアプリを開発するための非常に人気のあるフレームワークです。Next.jsは、プロジェクトの構成に関するすべてを取得するだけでなく、データのフェッチやルーティングなどの問題の解決策も提供します。

Next.jsとMUIの組み合わせの何が特別なのですか？

Next.jsが非常に人気があるもう1つの理由は、Webアプリのすべてのページを事前にレンダリングできることです。結果として、Next.jsは、JavaScriptにクライアント側ですべてを実行させるのではなく、サーバー側で事前にHTMLを生成します。この動作は通常、パフォーマンスとSEOの向上につながります。

ただし、MUIと組み合わせると、サーバー側のレンダリングにはいくつかの課題があります。MUIはサーバー側でレンダリングされるように設計されていますが、開発者はこの機能が正しく統合されていることを確認する必要があります。これがまさにこのブログ投稿の内容です。

通常、サーバー側でCSSをレンダリングする必要はありません。ただし、サーバーの応答にスタイルを含めず、CSSをクライアントに挿入させると、FOUC（ちらつき）のリスクが発生します。

入門

よく従うために、JavaScript、React、Next.js（特にサーバーサイドレンダリングなどの原則）の基本的な知識があると役立つことをお勧めします。

このブログ投稿のソースコードはここにあります。

始めるために、新しいNext.jsプロジェクトを作成しましょう。そのためには、プロジェクトを保存して実行するディレクトリに移動します。

npx create-next-app@latest

その過程で、プロジェクトに名前を付けるように求められます。ここで好きなものを選択してください。その後、次のコマンドでプロジェクトに変更します。

cd <project-name>

セットアップに関して残っていることが1つあります。それは、必要なパッケージをインストールすることです。

npm install @mui/material @emotion/react @emotion/server

Emotionというライブラリからパッケージをインストールしていることに気付くでしょう。つまり、Emotionは、JavaScriptでCSSを記述できるライブラリであり、最新バージョンのMUI（5）でスタイルを作成するために使用されます。

すべてのパッケージをインストールしたら、先に進んでNext.jsアプリケーションを起動します。

npm run dev

カスタムテーマを作成する

テーマをカスタマイズする前に、プロジェクトをクリーンアップできます。この投稿ではAPIルートを実装しないため、APIディレクトリ内のディレクトリを削除できます。pages

Home.module.css 次に、ディレクトリ内のファイル内のすべてのスタイルをstyles 次のCSSに置き換えます。

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

index.js 次に、ディレクトリ内のファイルにジャンプしてpages、コードを次のように置き換えます。

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

上記のコードでわかるように、Switchコンポーネントをインポートします。これは、3つの異なる状態で3回使用します。Webページは次のようになります。

この時点では、サーバー側でのスタイルのレンダリングはまだありません。それでも、私たちのページは意図したとおりであり、ちらつきに気付かない可能性があります。

ただし、ページがより複雑で広範囲になると、ちらつきの可能性が高くなります。

カスタムテーマを実装する

次に、カスタムテーマを実際に実装してみましょう。そのためには、プロジェクトのルートレベルに新しいディレクトリを作成する必要があります。私の場合、それをそのディレクトリ内に呼び出し、というファイルを作成して、次のコードを追加します。utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

このファイルを使用すると、MUIのデフォルトのテーマ設定を上書きできます。簡単にするために、プライマリパレットのみをオレンジ色に変更します。

これらの変更を実際に適用するには、このカスタムテーマを使用するようにWebページに指示する必要があります。これは、ディレクトリ内の_app.js ファイルで行われます。pages

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

ここで調整する必要があるのは、コンポーネントをコンポーネントでラップしThemeProvider 、カスタムテーマを渡すことだけです。このThemeProvider コンポーネントは、アプリケーションへのテーマの挿入を処理します。

これで、ページは次のようになります。

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

サーバー側でレンダリングされたCSSを最終的に追加するには、3つの最終ファイルを追加/カスタマイズする必要があります。

utils まず、。というディレクトリに新しいファイルを作成しますcreateEmotionCache.js。

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

このcreateEmotionCache機能により、Emotionのデフォルト設定がカスタムスタイルに置き換えられ、この情報がクライアント側とサーバー側の両方で構成されるようになります。prependオプションはに設定されていますtrue。これにより、カスタムスタイルが最初にロードされます。

次のステップでは、最初にこのキャッシュをディレクトリ内の_app.js ファイルでクライアント側に提供します。pages

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

上記のコードスニペットの最初の行では、定義した関数を使用してクライアント側のキャッシュを作成します。その後、コンポーネントにCacheProviderスタイリングを提供するために、コンポーネントをaでラップするだけです。

最後に、ページ/応答がクライアントに送信される前に、サーバー側にスタイルを正しくレンダリングするように指示する方法を理解する必要があります。これはカスタム_document.jsファイルで行われ、ディレクトリに追加する必要がありますpages 。<head>目的は、ページのタグにスタイルを追加することです。新しく作成した_document.jsファイルに次のコードを追加します。

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

上記のスニペットのコードは、サーバー側でのみ実行されます。このgetInitialProps関数はクライアント側でも使用できますが、このコードはクライアント側では実行されません。これは、Next.jsが、この_document.jsファイルがサーバー上でのみレンダリングされるように構成されているためです。

関数の上部を見ると、クライアント側getInitialPropsと同じ関数を使用していることがわかります。次に、このキャッシュだけが関数内のコンポーネントに小道具としてcreateEmotionCache 渡されます。Appctx.renderPageemotionCache

アレイ_emotionStyleTags

最後に詳しく見ていきますが、これは関数のステートメントのemotionStyleTagsコードスニペットの下部にあります。returngetInitialProps

最後に、emotionStyleTags はJSX要素の配列です。それぞれ、スタイルタグ。これらのスタイルタグは、次のコード行に基づいて作成されます。

const emotionStyles = extractCriticalToChunks(initialProps.html);

このコードは、Emotionからスタイルを取得する場所からのものです。

最後に、次のコード行を使用しemotionStyleTags てコンポーネント内に追加します。<Head>

<Head>
   {this.props.emotionStyleTags}
</Head>

結論

このブログ投稿でわかるように、Next.jsをMUIと組み合わせて設定することは、一種の苦労になる可能性があります。しかし、この組み合わせの利点を考慮すると、トレードオフは依然としてかなり良好です。すぐに開始したい場合は、このブログ投稿のコードを使用してリポジトリのクローンを作成してください。

ソース：https ：//blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

Premiers Pas avec MUI et Next.js

Commencer vos projets le plus rapidement possible peut être un facteur très essentiel dans le développement Web - à la fois dans des contextes professionnels et privés. C'est pourquoi les frameworks comme Next.js et les bibliothèques comme MUI sont si populaires et utiles.

Dans cet article de blog, nous couvrirons le processus de configuration de Next.js avec MUI.

Avant d'examiner la configuration concrète, permettez-moi d'abord d'expliquer ce que sont Next.js et MUI et pourquoi la configuration peut être différente de l'utilisation de MUI dans d'autres scénarios.

Qu'est-ce que MUI ?

MUI (anciennement Material UI) est une bibliothèque de composants très bien documentée qui implémente le système Material Design de Google. Cette bibliothèque est open source et, par conséquent, entièrement personnalisable. Dès sa sortie de l'emballage, MUI propose des composants prêts pour la production tels que des boutons, des alertes, des menus, des tableaux et bien plus encore.

Consultez la documentation de MUI pour avoir un aperçu de ce qu'ils proposent.

Qu'est-ce que Next.js ?

Next.js est un framework très populaire pour développer des applications Web entièrement fonctionnelles avec React. Next.js vous prend non seulement tout en ce qui concerne la configuration de votre projet, mais propose également des solutions à des problèmes tels que la récupération et le routage des données .

Quelle est la particularité de la combinaison de Next.js et de MUI ?

Une autre raison pour laquelle Next.js est si populaire est qu'il vous permet de pré-rendre chaque page de votre application Web. En conséquence, Next.js générera du HTML à l'avance côté serveur, au lieu de laisser JavaScript faire tout cela côté client. Ce comportement conduit normalement à une amélioration des performances et du référencement.

Cependant, lorsqu'il est combiné avec MUI, le rendu côté serveur nous présente certains défis. Même si MUI est conçu pour être rendu côté serveur, les développeurs doivent s'assurer que cette fonctionnalité est correctement intégrée - et c'est exactement le sujet de cet article de blog.

Généralement, il n'est pas absolument nécessaire de restituer le CSS côté serveur. Mais si vous n'incluez pas les styles dans la réponse de votre serveur et laissez le CSS être injecté par le client, le risque de FOUC (scintillement) sera présent.

Commencer

Pour bien suivre, je recommanderais d'avoir des connaissances de base en JavaScript, React et Next.js (en particulier des principes comme le rendu côté serveur) seront utiles.

Le code source de cet article de blog peut être trouvé ici .

Pour commencer, créons un nouveau projet Next.js. Pour cela, placez-vous dans un répertoire où vous souhaitez stocker votre projet et exécutez :

npx create-next-app@latest

Au cours du processus, il vous sera demandé de nommer votre projet. Choisissez ce que vous aimez ici. Après cela, passez à votre projet avec :

cd <project-name>

Il reste une chose concernant l'installation et c'est d'installer les packages nécessaires.

npm install @mui/material @emotion/react @emotion/server

Vous remarquerez que nous installons des packages à partir d'une bibliothèque appelée Emotion . En bref, Emotion est une bibliothèque qui permet d'écrire du CSS en JavaScript et qui est utilisée dans la dernière version de MUI (5) pour créer des styles.

Une fois que vous avez installé tous les packages, lancez votre application Next.js :

npm run dev

Créez votre thème personnalisé

Avant de personnaliser le thème, nous pouvons nettoyer notre projet. Vous pouvez supprimer le APIrépertoire dans le pagesrépertoire, car nous n'implémenterons aucune route d'API dans cet article.

Deuxièmement, remplacez tous les styles du Home.module.css fichier dans le styles répertoire par le CSS suivant :

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

Maintenant, passez au index.js fichier dans votre pagesrépertoire et remplacez le code par ce qui suit :

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

Comme vous pouvez le voir dans le code ci-dessus, nous importons un Switchcomposant , que nous utilisons trois fois avec trois états différents. Votre page Web devrait ressembler à ceci :

À ce stade, il n'y a pas encore de rendu des styles côté serveur. Pourtant, notre page ressemble à ce que nous voulons qu'elle soit, et il est tout à fait possible que vous ne remarquiez aucun scintillement.

Mais, si la page devient plus complexe et étendue, la probabilité de scintillement augmentera.

Implémenter le thème personnalisé

Ensuite, implémentons réellement notre thème personnalisé. Pour cela, vous devrez créer un nouveau répertoire au niveau racine de votre projet. Dans mon cas, je l'ai appelé À l' intérieur de ce répertoire, créez un fichier appelé et ajoutez le code suivant :utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

Ce fichier vous permettra de remplacer les paramètres de thème par défaut de MUI . Par souci de simplicité, nous ne changerons que la palette principale en orange.

Pour appliquer réellement ces modifications, nous devons indiquer à notre page Web d'utiliser ce thème personnalisé. Cela se fait dans le _app.js fichier dans le pages répertoire :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

La seule chose qui doit être ajustée ici est d'envelopper notre composant avec un ThemeProvider composant et de lui transmettre notre thème personnalisé. Ce ThemeProvider composant va gérer l'injection de notre thème dans notre application.

Maintenant, notre page devrait ressembler à ceci :

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

Pour enfin ajouter du CSS rendu côté serveur, nous devons ajouter/personnaliser trois fichiers finaux.

Tout d'abord, créez un nouveau fichier dans le utils répertoire appelé createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

Cette createEmotionCachefonction garantit que les paramètres par défaut d'Emotion seront remplacés par nos styles personnalisés et que ces informations seront configurées à la fois côté client et côté serveur. L'option de préfixe est définie sur true, ce qui entraînera le chargement de nos styles personnalisés en premier.

Dans l'étape suivante, nous fournirons d'abord ce cache côté client dans le _app.js fichier du pages répertoire :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

Dans la première ligne de l'extrait de code ci-dessus, nous créons le cache côté client avec la fonction que nous venons de définir. Après cela, tout ce que nous avons à faire est d'envelopper notre composant dans un CacheProviderafin de donner notre style à nos composants.

Enfin, nous devons trouver un moyen de dire au côté serveur de restituer correctement les styles avant que la page/réponse ne soit envoyée aux clients. Cela se fera dans un _document.jsfichier personnalisé, que nous devons ajouter au pages répertoire. Le but est d'ajouter nos styles au <head>tag de notre page. Ajoutez le code suivant au _document.jsfichier nouvellement créé :

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

Le code de l'extrait ci-dessus ne fonctionnera que côté serveur. Même si la getInitialPropsfonction peut également être utilisée côté client, ce code ne sera pas exécuté côté client. En effet, Next.js est configuré de manière à ce que ce _document.jsfichier ne soit rendu que sur le serveur.

Si vous regardez en haut de la getInitialPropsfonction, vous remarquerez que nous utilisons la même createEmotionCache fonction que côté client. Seul ce cache est ensuite transmis au Appcomposant dans la ctx.renderPagefonction en tant que emotionCacheprop.

Le emotionStyleTagstableau

La dernière chose que nous allons examiner de plus près est le emotionStyleTags, qui se trouve au bas de l'extrait de code dans l' returninstruction de notre getInitialPropsfonction.

En fin de compte, emotionStyleTags est un tableau d'éléments JSX ; respectivement, les balises de style. Ces balises de style sont créées sur la base de cette ligne de code :

const emotionStyles = extractCriticalToChunks(initialProps.html);

Ce code est à partir duquel nous récupérons les styles d'Emotion.

Enfin, nous ajoutons emotionStyleTags à l'intérieur du <Head> composant avec cette ligne de code :

<Head>
   {this.props.emotionStyleTags}
</Head>

Conclusion

Comme vous pouvez le voir dans cet article de blog, la configuration de Next.js en combinaison avec MUI peut être une sorte de lutte. Mais compte tenu des avantages de cette combinaison, le compromis est toujours assez bon. Si vous voulez commencer tout de suite, n'hésitez pas à cloner le référentiel avec le code de cet article de blog.

Source : https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

MUI 和 Next.js 入门

尽快开始您的项目可能是 Web 开发中非常重要的因素——无论是在商业环境还是私人环境中。这就是 Next.js 之类的框架和 MUI 之类的库如此受欢迎和有用的原因。

在这篇博文中，我们将介绍使用 MUI 设置 Next.js 的过程。

在我们看具体设置之前，让我先解释一下 Next.js 和 MUI 是什么，以及为什么设置与在其他场景中使用 MUI 会有所不同。

什么是 MUI？

MUI（以前的 Material UI）是一个文档齐全的组件库，它实现了 Google 的 Material Design 系统。这个库是开源的，因此是完全可定制的。MUI 开箱即用，提供可用于生产的组件，如按钮、警报、菜单、表格等。

查看 MUI 的文档以了解他们提供的内容。

Next.js 是什么？

Next.js是一个非常流行的框架，用于使用 React 开发功能齐全的 Web 应用程序。Next.js 不仅可以从您那里获取有关项目配置的所有信息，还可以为数据获取和路由等问题提供解决方案。

Next.js 和 MUI 的结合有什么特别之处？

Next.js 如此受欢迎的另一个原因是它允许您预渲染 Web 应用程序的每个页面。因此，Next.js 将在服务器端预先生成 HTML，而不是让 JavaScript 在客户端完成所有这些工作。这种行为通常会提高性能和 SEO。

然而，当与 MUI 结合使用时，服务器端渲染给我们带来了一些挑战。尽管 MUI 设计为在服务器端呈现，但开发人员需要确保正确集成此功能——而这正是这篇博文的内容。

通常，在服务器端渲染 CSS 并不是绝对必要的。但是如果你没有在你的服务器响应中包含样式，而让 CSS 由客户端注入，就会存在FOUC （闪烁）的风险。

入门

为了顺利进行，我建议您具备 JavaScript、React 和 Next.js 的基本知识（尤其是服务器端渲染等原则）会有所帮助。

这篇博文的源代码可以在这里找到。

为了开始，让我们创建一个新的 Next.js 项目。为此，请切换到要存储项目并运行的目录：

npx create-next-app@latest

在此过程中，您将被要求为您的项目命名。在这里选择你喜欢的任何东西。之后，更改为您的项目：

cd <project-name>

关于设置还有一件事，那就是安装必要的软件包。

npm install @mui/material @emotion/react @emotion/server

您会注意到我们从名为Emotion的库中安装包。简而言之，Emotion 是一个允许你用 JavaScript 编写 CSS 的库，并且在最新版本的 MUI (5) 中用于创建样式。

安装完所有软件包后，继续并启动 Next.js 应用程序：

npm run dev

创建您的自定义主题

在我们自定义主题之前，我们可以清理我们的项目。您可以删除API目录中的pages目录，因为我们不会在本文中实现任何 API 路由。

其次，将目录下Home.module.css 文件中的所有样式替换styles 为如下CSS：

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

现在，跳转到index.js 您pages目录中的文件并将代码替换为以下内容：

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

正如您在上面的代码中看到的，我们导入了一个Switch组件，我们使用了 3 次具有三种不同状态的组件。您的网页应如下所示：

此时，服务器端还没有渲染样式。尽管如此，我们的页面看起来就像我们想要的那样，您很可能不会注意到任何闪烁。

但是，如果页面变得更加复杂和广泛，闪烁的可能性就会增加。

实现自定义主题

接下来，让我们实际实现我们的自定义主题。为此，您需要在项目的根级别创建一个新目录。就我而言，我将其命名为在该目录中，创建一个名为并添加以下代码的文件：utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

该文件将允许您覆盖 MUI 的默认主题设置。为了简单起见，我们只会将主调色板更改为橙色。

要实际应用这些更改，我们需要告诉我们的网页使用这个自定义主题。这是在目录中的_app.js 文件中完成的pages ：

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

这里唯一需要调整的就是用一个ThemeProvider 组件包裹我们的组件，并将我们的自定义主题传递给它。这个ThemeProvider 组件将处理我们的主题注入我们的应用程序。

现在，我们的页面应该是这样的：

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

为了最终添加服务器端渲染的 CSS，我们需要添加/自定义三个最终文件。

首先，在utils 名为createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

此createEmotionCache功能确保 Emotion 的默认设置将替换为我们的自定义样式，并且此信息将在客户端和服务器端进行配置。prepend 选项设置为true，这将导致我们的自定义样式首先加载。

在下一步中，我们将首先_app.js 在目录中的文件中将这个缓存提供给客户端pages ：

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

在上面代码片段的第一行中，我们使用刚刚定义的函数创建客户端缓存。之后，我们需要做的就是将我们的组件包装在 aCacheProvider中，以便为我们的组件提供样式。

最后，我们需要找到一种方法来告诉服务器端在页面/响应发送到客户端之前正确呈现样式。这将在一个自定义_document.js文件中完成，我们需要将其添加到pages 目录中。目的是将我们的样式添加到<head>我们页面的标签中。将以下代码添加到新创建的_document.js文件中：

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

上面代码片段中的代码只会在服务器端运行。即使该getInitialProps功能也可以在客户端使用，但此代码不会在客户端执行。这是因为 Next.js 的配置方式是该_document.js文件仅在服务器上呈现。

如果你看一下getInitialProps函数的顶部，你会注意到我们使用的是与createEmotionCache 客户端相同的函数。然后将这个缓存作为道具传递给函数中的App组件。ctx.renderPageemotionCache

数组_emotionStyleTags

我们要仔细研究的最后一件事是emotionStyleTags，它可以在我们函数return语句的代码片段底部找到。getInitialProps

最后，emotionStyleTags 是一个 JSX 元素数组；分别是样式标签。这些样式标签是基于这行代码创建的：

const emotionStyles = extractCriticalToChunks(initialProps.html);

这段代码是我们从 Emotion 中获取样式的地方。

最后，我们用这行代码emotionStyleTags 在组件内部添加：<Head>

<Head>
   {this.props.emotionStyleTags}
</Head>

结论

正如您在这篇博文中所见，结合 MUI 设置 Next.js 可能有点困难。但考虑到这种组合的优势，权衡还是很不错的。如果您想立即开始，请随时使用此博客文章中的代码克隆存储库。

来源：https ://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

Primeiros Passos com MUI e Next.js

Começar com seus projetos o mais rápido possível pode ser um fator essencial no desenvolvimento web – tanto em contextos empresariais quanto privados. É por isso que frameworks como Next.js e bibliotecas como MUI são tão populares e úteis.

Nesta postagem do blog, abordaremos o processo de configuração do Next.js com MUI.

Antes de darmos uma olhada na configuração concreta, deixe-me primeiro explicar o que são Next.js e MUI e por que a configuração pode ser diferente do uso de MUI em outros cenários.

O que é MUI?

MUI (anteriormente Material UI) é uma biblioteca de componentes muito bem documentada que implementa o sistema Material Design do Google. Esta biblioteca é de código aberto e, portanto, totalmente personalizável. Imediatamente, o MUI oferece componentes prontos para produção, como botões, alertas, menus, tabelas e muito mais.

Confira os documentos do MUI para obter uma visão geral do que eles oferecem.

O que é Next.js?

Next.js é uma estrutura muito popular para desenvolver aplicativos da Web totalmente funcionais com React. O Next.js não apenas pega tudo de você sobre a configuração do seu projeto, mas também oferece soluções para problemas como busca e roteamento de dados .

O que há de especial na combinação de Next.js e MUI?

Outra razão pela qual o Next.js é tão popular é que ele permite pré-renderizar cada página do seu aplicativo da web. Como consequência, o Next.js gerará HTML antecipadamente no lado do servidor, em vez de fazer com que o JavaScript faça tudo isso no lado do cliente. Esse comportamento normalmente leva a um melhor desempenho e SEO.

No entanto, quando combinado com o MUI, a renderização do lado do servidor nos apresenta alguns desafios. Embora o MUI seja projetado para ser renderizado no lado do servidor, os desenvolvedores precisam ter certeza de que essa funcionalidade está integrada corretamente — e é exatamente sobre isso que trata este post.

Geralmente, não é absolutamente necessário renderizar CSS no lado do servidor. Mas se você não incluir os estilos na resposta do seu servidor e deixar o CSS ser injetado pelo cliente, o risco de FOUC (cintilação) estará presente.

Começando

Para acompanhar bem, eu recomendo ter conhecimento básico de JavaScript, React e Next.js (especialmente princípios como renderização do lado do servidor) será útil.

O código-fonte desta postagem do blog pode ser encontrado aqui .

Para começar, vamos criar um novo projeto Next.js. Para isso, mude para um diretório onde você deseja armazenar seu projeto e execute:

npx create-next-app@latest

No processo, você será solicitado a nomear seu projeto. Escolha o que quiser aqui. Depois disso, mude para o seu projeto com:

cd <project-name>

Há uma coisa que falta em relação à configuração e é instalar os pacotes necessários.

npm install @mui/material @emotion/react @emotion/server

Você notará que instalamos pacotes de uma biblioteca chamada Emotion . Resumindo, Emotion é uma biblioteca que permite escrever CSS em JavaScript e é usada na última versão do MUI (5) para criar estilos.

Depois de instalar todos os pacotes, vá em frente e inicie seu aplicativo Next.js:

npm run dev

Crie seu tema personalizado

Antes de personalizar o tema, podemos limpar nosso projeto. Você pode excluir o APIdiretório no pagesdiretório, pois não implementaremos nenhuma rota de API neste post.

Em segundo lugar, substitua todos os estilos no Home.module.css arquivo no styles diretório pelo seguinte CSS:

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

Agora, vá para o index.js arquivo em seu pagesdiretório e substitua o código pelo seguinte:

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

Como você pode ver no código acima, importamos um Switchcomponente , que usamos três vezes com três estados diferentes. Sua página da web deve ficar assim:

Neste ponto, ainda não há renderização dos estilos no lado do servidor. Ainda assim, nossa página se parece com o que pretendemos, e é bem possível que você não perceba nenhuma oscilação.

Mas, se a página ficar mais complexa e extensa, a probabilidade de cintilação aumentará.

Implemente o tema personalizado

Em seguida, vamos implementar nosso tema personalizado. Para isso, você precisará criar um novo diretório no nível raiz do seu projeto. No meu caso, chamei dentro desse diretório, crie um arquivo chamado e adicione o seguinte código:utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

Este arquivo permitirá que você substitua as configurações de tema padrão do MUI . Por uma questão de simplicidade, alteraremos apenas a paleta primária para laranja.

Para realmente aplicar essas alterações, precisamos dizer à nossa página da Web para usar esse tema personalizado. Isso é feito no _app.js arquivo no pages diretório:

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

A única coisa que precisa ser ajustada aqui é envolver nosso componente com um ThemeProvider componente e passar nosso tema personalizado para ele. Este ThemeProvider componente tratará da injeção do nosso tema em nossa aplicação.

Agora, nossa página deve ficar assim:

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

Para finalmente adicionar CSS renderizado no servidor, precisamos adicionar/personalizar três arquivos finais.

Primeiro, crie um novo arquivo no utils diretório chamado createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

Essa createEmotionCachefunção garante que as configurações padrão do Emotion sejam substituídas por nossos estilos personalizados e que essas informações sejam configuradas tanto no cliente quanto no servidor. A opção prepend está definida como true, o que fará com que nossos estilos personalizados sejam carregados primeiro.

Na próxima etapa, primeiro forneceremos esse cache para o lado do cliente no _app.js arquivo no pages diretório:

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

Na primeira linha do trecho de código acima, criamos o cache do lado do cliente com a função que acabamos de definir. Depois disso, tudo o que precisamos fazer é envolver nosso componente dentro de a CacheProviderpara fornecer nosso estilo aos nossos componentes.

Por fim, precisamos descobrir uma maneira de informar ao lado do servidor para renderizar os estilos corretamente antes que a página/resposta seja enviada aos clientes. Isso será feito em um _document.jsarquivo personalizado, que precisamos adicionar ao pages diretório. O objetivo é adicionar nossos estilos à <head>tag da nossa página. Adicione o seguinte código ao _document.jsarquivo recém-criado:

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

O código do snippet acima será executado apenas no lado do servidor. Embora a getInitialPropsfunção também possa ser usada no lado do cliente, esse código não será executado no lado do cliente. Isso ocorre porque o Next.js está configurado de forma que esse _document.jsarquivo seja renderizado apenas no servidor.

Se você der uma olhada na parte superior da getInitialPropsfunção, notará que estamos usando a mesma createEmotionCache função do lado do cliente. Apenas este cache é então passado para o Appcomponente na ctx.renderPagefunção como emotionCacheprop.

A emotionStyleTagsmatriz

A última coisa que veremos mais de perto é o emotionStyleTags, que pode ser encontrado na parte inferior do trecho de código na returndeclaração de nossa getInitialPropsfunção.

No final, emotionStyleTags é uma matriz de elementos JSX; respectivamente, tags de estilo. Essas tags de estilo são criadas com base nesta linha de código:

const emotionStyles = extractCriticalToChunks(initialProps.html);

Este código é de onde pegamos os estilos do Emotion.

Por fim, adicionamos emotionStyleTags dentro do <Head> componente com esta linha de código:

<Head>
   {this.props.emotionStyleTags}
</Head>

Conclusão

Como você pode ver nesta postagem do blog, configurar o Next.js em combinação com o MUI pode ser um pouco difícil. Mas considerando as vantagens dessa combinação, o trade off ainda é muito bom. Se você quiser começar imediatamente, sinta-se à vontade para clonar o repositório com o código desta postagem do blog.

Fonte: https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

Primeros Pasos con MUI y Next.js

Comenzar con sus proyectos lo más rápido posible puede ser un factor muy esencial en el desarrollo web, tanto en contextos comerciales como privados. Es por eso que los marcos como Next.js y las bibliotecas como MUI son tan populares y útiles.

En esta publicación de blog, cubriremos el proceso de configuración de Next.js con MUI.

Antes de echar un vistazo a la configuración concreta, primero permítanme explicar qué son Next.js y MUI y por qué la configuración puede ser diferente del uso de MUI en otros escenarios.

¿Qué es MUI?

MUI (anteriormente Material UI) es una biblioteca de componentes muy bien documentada que implementa el sistema Material Design de Google. Esta biblioteca es de código abierto y, por lo tanto, totalmente personalizable. Desde el primer momento, MUI ofrece componentes listos para producción como botones, alertas, menús, tablas y mucho más.

Consulte los documentos de MUI para obtener una descripción general de lo que ofrecen.

¿Qué es Next.js?

Next.js es un marco muy popular para desarrollar aplicaciones web completamente funcionales con React. Next.js no solo toma todo de usted con respecto a la configuración de su proyecto, sino que también ofrece soluciones para problemas como la obtención y el enrutamiento de datos .

¿Qué tiene de especial la combinación de Next.js y MUI?

Otra razón por la que Next.js es tan popular es que le permite renderizar previamente cada página de su aplicación web. Como consecuencia, Next.js generará HTML por adelantado en el lado del servidor, en lugar de hacer que JavaScript haga todo eso en el lado del cliente. Este comportamiento normalmente conduce a un mejor rendimiento y SEO.

Sin embargo, cuando se combina con MUI, la representación del lado del servidor nos presenta algunos desafíos. Aunque MUI está diseñado para ser renderizado en el lado del servidor, los desarrolladores deben asegurarse de que esta funcionalidad esté correctamente integrada, y esto es exactamente de lo que trata esta publicación de blog.

Generalmente, no es absolutamente necesario renderizar CSS en el lado del servidor. Pero si no incluye los estilos en la respuesta de su servidor y deja que el cliente inyecte el CSS, el riesgo de FOUC (parpadeo) estará presente.

Empezando

Para seguir bien, recomendaría tener conocimientos básicos de JavaScript, React y Next.js (especialmente principios como la representación del lado del servidor) será útil.

El código fuente de esta publicación de blog se puede encontrar aquí .

Para comenzar, creemos un nuevo proyecto Next.js. Para eso, cambie a un directorio donde desee almacenar su proyecto y ejecute:

npx create-next-app@latest

En el proceso, se le pedirá que nombre su proyecto. Elige lo que quieras aquí. Después de eso, cambie a su proyecto con:

cd <project-name>

Queda una cosa con respecto a la configuración y es instalar los paquetes necesarios.

npm install @mui/material @emotion/react @emotion/server

Notarás que instalamos paquetes de una biblioteca llamada Emoción . En resumen, Emotion es una biblioteca que le permite escribir CSS en JavaScript y se usa en la última versión de MUI (5) para crear estilos.

Una vez que haya instalado todos los paquetes, continúe e inicie su aplicación Next.js:

npm run dev

Crea tu tema personalizado

Antes de personalizar el tema, podemos limpiar nuestro proyecto. Puede eliminar el APIdirectorio en el pagesdirectorio, ya que no implementaremos ninguna ruta API en esta publicación.

En segundo lugar, reemplace todos los estilos en el Home.module.css archivo en el styles directorio con el siguiente CSS:

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

Ahora, vaya al index.js archivo en su pagesdirectorio y reemplace el código con lo siguiente:

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

Como puede ver en el código anterior, importamos un Switchcomponente , que usamos tres veces con tres estados diferentes. Su página web debería verse así:

En este punto, todavía no hay representación de los estilos en el lado del servidor. Aún así, nuestra página se ve como la pretendemos, y es muy posible que no note ningún parpadeo.

Pero, si la página se vuelve más compleja y extensa, la probabilidad de parpadeo aumentará.

Implementar el tema personalizado

A continuación, implementemos nuestro tema personalizado. Para eso, deberá crear un nuevo directorio en el nivel raíz de su proyecto. En mi caso, lo llamé Dentro de ese directorio, cree un archivo llamado y agregue el siguiente código:utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

Este archivo le permitirá anular la configuración del tema predeterminado de MUI . En aras de la simplicidad, solo cambiaremos la paleta principal para que sea naranja.

Para aplicar realmente esos cambios, debemos decirle a nuestra página web que use este tema personalizado. Esto se hace en el _app.js archivo en el pages directorio:

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

Lo único que debe ajustarse aquí es envolver nuestro componente con un ThemeProvider componente y pasarle nuestro tema personalizado. Este ThemeProvider componente manejará la inyección de nuestro tema a nuestra aplicación.

Ahora, nuestra página debería verse así:

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

Para finalmente agregar CSS renderizado del lado del servidor, necesitamos agregar/personalizar tres archivos finales.

Primero, cree un nuevo archivo en el utils directorio llamado createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

Esta createEmotionCachefunción garantiza que la configuración predeterminada de Emotion se reemplace con nuestros estilos personalizados y que esta información se configure tanto en el lado del cliente como en el del servidor. La opción de prefijo está establecida en true, lo que hará que nuestros estilos personalizados se carguen primero.

En el siguiente paso, primero proporcionaremos este caché al lado del cliente en el _app.js archivo del pages directorio:

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

En la primera línea del fragmento de código anterior, creamos la memoria caché del lado del cliente con la función que acabamos de definir. Después de eso, todo lo que tenemos que hacer es envolver nuestro componente dentro CacheProviderde un para proporcionar nuestro estilo a nuestros componentes.

Por último, debemos encontrar una manera de decirle al lado del servidor que represente los estilos correctamente antes de que la página/respuesta se envíe a los clientes. Esto se hará en un _document.jsarchivo personalizado, que debemos agregar al pages directorio. El objetivo es agregar nuestros estilos a la <head>etiqueta de nuestra página. Agregue el siguiente código al _document.jsarchivo recién creado:

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

El código del fragmento anterior solo se ejecutará en el lado del servidor. Aunque la getInitialPropsfunción también se puede usar en el lado del cliente, este código no se ejecutará en el lado del cliente. Esto se debe a que Next.js está configurado de manera que este _document.jsarchivo solo se procesa en el servidor.

Si observa la parte superior de la getInitialPropsfunción, notará que estamos usando la misma createEmotionCache función que en el lado del cliente. Solo este caché se pasa al Appcomponente en la ctx.renderPagefunción como emotionCacheaccesorio.

la emotionStyleTagsmatriz

Lo último que veremos más de cerca es el emotionStyleTags, que se puede encontrar en la parte inferior del fragmento de código en la returndeclaración de nuestra getInitialPropsfunción.

Al final, emotionStyleTags es una matriz de elementos JSX; respectivamente, etiquetas de estilo. Estas etiquetas de estilo se crean en función de esta línea de código:

const emotionStyles = extractCriticalToChunks(initialProps.html);

Este código es de donde tomamos los estilos de Emoción.

Finalmente, agregamos emotionStyleTags dentro del <Head> componente con esta línea de código:

<Head>
   {this.props.emotionStyleTags}
</Head>

Conclusión

Como puede ver en esta publicación de blog, configurar Next.js en combinación con MUI puede ser una especie de lucha. Pero considerando las ventajas de esta combinación, la compensación sigue siendo bastante buena. Si desea comenzar de inmediato, siéntase libre de clonar el repositorio con el código de esta publicación de blog.

Fuente: https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

Bắt Đầu với MUI và Next.js

Bắt đầu với các dự án của bạn càng nhanh càng tốt có thể là một yếu tố rất cần thiết trong việc phát triển web - cả trong bối cảnh kinh doanh và riêng tư. Đó là lý do tại sao các framework như Next.js và các thư viện như MUI rất phổ biến và hữu ích.

Trong bài đăng trên blog này, chúng tôi sẽ trình bày quá trình thiết lập Next.js với MUI.

Trước khi chúng ta xem xét thiết lập cụ thể, trước tiên hãy để tôi giải thích Next.js và MUI là gì và tại sao thiết lập có thể khác với việc sử dụng MUI trong các tình huống khác.

MUI là gì?

MUI (trước đây là Material UI) là một thư viện được ghi chép rất đầy đủ về các thành phần triển khai hệ thống Material Design của Google. Thư viện này là mã nguồn mở và do đó, hoàn toàn có thể tùy chỉnh. Ngay ra khỏi hộp, MUI cung cấp các thành phần sẵn sàng sản xuất như nút, cảnh báo, menu, bảng, v.v.

Kiểm tra tài liệu của MUI để có cái nhìn tổng quan về những gì họ cung cấp.

Next.js là gì?

Next.js là một khung công tác rất phổ biến để phát triển các ứng dụng web đầy đủ chức năng với React. Next.js không chỉ lấy mọi thứ từ bạn liên quan đến cấu hình dự án của bạn mà còn cung cấp các giải pháp cho các vấn đề như tìm nạp và định tuyến dữ liệu .

Sự kết hợp giữa Next.js và MUI có gì đặc biệt?

Một lý do khác khiến Next.js trở nên phổ biến là nó cho phép bạn hiển thị trước mọi trang trong ứng dụng web của mình. Do đó, Next.js sẽ tạo HTML trước ở phía máy chủ, thay vì khiến JavaScript thực hiện tất cả những điều đó ở phía máy khách. Hành vi này thường dẫn đến cải thiện hiệu suất và SEO.

Tuy nhiên, khi kết hợp với MUI, kết xuất phía máy chủ sẽ cho chúng ta một số thách thức. Mặc dù MUI được thiết kế để hiển thị ở phía máy chủ, các nhà phát triển cần đảm bảo rằng chức năng này được tích hợp chính xác - và đây chính xác là nội dung của bài đăng blog này.

Nói chung, không nhất thiết phải hiển thị CSS ở phía máy chủ. Nhưng nếu bạn không bao gồm các kiểu trong phản hồi máy chủ của mình và để CSS được máy khách chèn vào, nguy cơ FOUC (chập chờn) sẽ hiện hữu.

Bắt đầu

Để làm theo tốt, tôi khuyên bạn nên có kiến ​​thức cơ bản về JavaScript, React và Next.js (đặc biệt là các nguyên tắc như hiển thị phía máy chủ) sẽ hữu ích.

Mã nguồn từ bài đăng trên blog này có thể được tìm thấy ở đây .

Để bắt đầu, hãy tạo một dự án Next.js mới. Đối với điều đó, hãy thay đổi thành một thư mục nơi bạn muốn lưu trữ dự án của mình và chạy:

npx create-next-app@latest

Trong quá trình này, bạn sẽ được yêu cầu đặt tên cho dự án của mình. Chọn bất cứ điều gì bạn thích ở đây. Sau đó, thay đổi dự án của bạn với:

cd <project-name>

Có một điều còn lại liên quan đến thiết lập và đó là cài đặt các gói cần thiết.

npm install @mui/material @emotion/react @emotion/server

Bạn sẽ nhận thấy rằng chúng tôi cài đặt các gói từ thư viện có tên là Cảm xúc . Tóm lại, Emotion là một thư viện cho phép bạn viết CSS bằng JavaScript và được sử dụng trong phiên bản mới nhất của MUI (5) để tạo kiểu.

Khi bạn đã cài đặt tất cả các gói, hãy tiếp tục và khởi động ứng dụng Next.js của bạn:

npm run dev

Tạo chủ đề tùy chỉnh của bạn

Trước khi tùy chỉnh chủ đề, chúng tôi có thể dọn dẹp dự án của mình. Bạn có thể xóa APIthư mục trong thư mục pages, vì chúng tôi sẽ không triển khai bất kỳ tuyến API nào trong bài đăng này.

Thứ hai, thay thế tất cả các kiểu trong Home.module.css tệp trong styles thư mục bằng CSS sau:

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

Bây giờ, chuyển đến index.js tệp trong thư mục của bạn pagesvà thay thế mã bằng mã sau:

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

Như bạn có thể thấy trong đoạn mã trên, chúng tôi nhập một Switchthành phần , mà chúng tôi sử dụng ba lần với ba trạng thái khác nhau. Trang web của bạn sẽ trông như thế này:

Tại thời điểm này, vẫn chưa có kết xuất các kiểu ở phía máy chủ. Tuy nhiên, trang của chúng tôi trông giống như chúng tôi dự định và rất có thể bạn sẽ không nhận thấy bất kỳ sự nhấp nháy nào.

Tuy nhiên, nếu trang ngày càng phức tạp và mở rộng, khả năng bị chập chờn sẽ tăng lên.

Triển khai chủ đề tùy chỉnh

Tiếp theo, hãy thực sự triển khai chủ đề tùy chỉnh của chúng tôi. Vì vậy, bạn sẽ cần tạo một thư mục mới ở cấp cơ sở của dự án của mình. Trong trường hợp của tôi, tôi đã gọi nó là Bên trong thư mục đó, hãy tạo một tệp có tên và thêm mã sau:utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

Tệp này sẽ cho phép bạn ghi đè cài đặt chủ đề mặc định của MUI . Vì đơn giản, chúng tôi sẽ chỉ thay đổi bảng màu chính thành màu cam.

Để thực sự áp dụng những thay đổi đó, chúng tôi cần yêu cầu trang web của mình sử dụng chủ đề tùy chỉnh này. Điều này được thực hiện trong _app.js tệp trong thư mục pages :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

Điều duy nhất cần được điều chỉnh ở đây là bọc thành phần của chúng ta bằng một ThemeProvider thành phần và chuyển chủ đề tùy chỉnh của chúng ta vào đó. Thành ThemeProvider phần này sẽ xử lý việc đưa chủ đề của chúng tôi vào ứng dụng của chúng tôi.

Bây giờ, trang của chúng ta sẽ trông như thế này:

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

Cuối cùng để thêm CSS được kết xuất phía máy chủ, chúng ta cần thêm / tùy chỉnh ba tệp cuối cùng.

Đầu tiên, tạo một tệp mới trong thư mục utils có tên createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

Chức createEmotionCachenăng này đảm bảo rằng cài đặt mặc định của Emotion sẽ được thay thế bằng các kiểu tùy chỉnh của chúng tôi và thông tin này sẽ được định cấu hình ở cả phía máy khách và máy chủ. Tùy chọn thêm trước được đặt thành true, điều này sẽ khiến các kiểu tùy chỉnh của chúng tôi tải trước.

Trong bước tiếp theo, trước tiên chúng tôi sẽ cung cấp bộ đệm ẩn này cho phía máy khách trong _app.js tệp trong thư mục pages :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

Trong dòng đầu tiên của đoạn mã ở trên, chúng tôi tạo bộ đệm ẩn phía máy khách với chức năng chúng tôi vừa xác định. Sau đó, tất cả những gì chúng ta cần làm là bọc thành phần của chúng ta bên trong một CacheProviderđể cung cấp kiểu dáng cho các thành phần của chúng ta.

Cuối cùng, chúng ta cần tìm ra cách để yêu cầu phía máy chủ hiển thị các kiểu một cách chính xác trước khi trang / phản hồi được gửi đến máy khách. Điều này sẽ được thực hiện trong một tệp tùy chỉnh _document.js, mà chúng tôi cần thêm vào thư mục pages . Mục đích là để thêm phong cách của chúng tôi vào <head>thẻ của trang của chúng tôi. Thêm mã sau vào _document.jstệp mới tạo:

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

Mã từ đoạn mã trên sẽ chỉ chạy ở phía máy chủ. Mặc dù getInitialPropschức năng cũng có thể được sử dụng ở phía máy khách, nhưng mã này sẽ không được thực thi ở phía máy khách. Điều này là do Next.js được định cấu hình theo cách mà _document.jstệp này chỉ được hiển thị trên máy chủ.

Nếu bạn nhìn vào phần trên cùng của getInitialPropschức năng, bạn sẽ nhận thấy rằng chúng tôi đang sử dụng createEmotionCache chức năng tương tự như ở phía máy khách. Chỉ bộ nhớ cache này sau đó được chuyển cho Appthành phần trong ctx.renderPagehàm làm phần emotionCachemềm hỗ trợ.

Mảng emotionStyleTags_

Điều cuối cùng chúng ta sẽ xem xét kỹ hơn là emotionStyleTags, có thể được tìm thấy ở cuối đoạn mã trong returntuyên bố về getInitialPropshàm của chúng ta.

Cuối cùng, emotionStyleTags là một mảng các phần tử JSX; tương ứng là các thẻ kiểu. Các thẻ kiểu này được tạo dựa trên dòng mã này:

const emotionStyles = extractCriticalToChunks(initialProps.html);

Mã này là nơi chúng tôi lấy các phong cách từ Cảm xúc.

Cuối cùng, chúng tôi thêm emotionStyleTags vào bên trong <Head> thành phần với dòng mã này:

<Head>
   {this.props.emotionStyleTags}
</Head>

Sự kết luận

Như bạn có thể thấy trong bài đăng trên blog này, việc thiết lập Next.js kết hợp với MUI có thể là một cuộc đấu tranh. Nhưng nếu xét về lợi thế của sự kết hợp này, thì sự đánh đổi vẫn là khá tốt. Nếu bạn muốn bắt đầu ngay lập tức, hãy sao chép repo bằng mã từ bài đăng trên blog này.

Nguồn: https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

Getting Started with MUI and Next.js

Getting started with your projects as quickly as possible can be a very essential factor in web development – both in business and private contexts. That’s why frameworks like Next.js and libraries like MUI are so popular and useful.

In this blog post, we’ll cover the process of setting up Next.js with MUI.

Before we have a look at the concrete setup, let me first explain what Next.js and MUI are and why the setup can be different from using MUI in other scenarios.

What is MUI?

MUI (formerly Material UI) is a very well-documented library of components that implements Google’s Material Design system. This library is open source and, hence, fully customizable. Right out of the box, MUI offers production-ready components like buttons, alerts, menus, tables, and much more.

Check out MUI’s docs to get an overview of what they offer.

See more at: https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui #nextjs 

Cree Temas Y Componentes Receptivos Con Mantine

¿Qué factores considera al seleccionar una interfaz para sus proyectos frontend? Déjame adivinar: buscas la biblioteca de interfaz de usuario más popular y aprendes a utilizarla en la documentación. O desarrollará su propia biblioteca de interfaz de usuario, como MUI o Bootstrap, para realizar el trabajo rápidamente. En cualquier caso, los diseños de interfaz de usuario suelen incluir elementos personalizados que requieren una estrategia de implementación única. Es crucial saber qué biblioteca usar para un proyecto.

Si está familiarizado con algunas de las bibliotecas de interfaz de usuario más populares, es posible que le interese Mantine, una nueva biblioteca de interfaz de usuario que recientemente ha causado sensación. En este artículo, aprenderemos cómo usar Mantine y por qué se destaca de la competencia.

requisitos previos

Para seguir y comprender este tutorial, necesitará lo siguiente:

• Reaccionar v.16 o más reciente
• Conocimiento práctico de React y Node.js
• un editor de texto

¿Qué es Mantina?

Mantine es un marco de componentes de React con todas las funciones que le permite crear rápidamente aplicaciones en línea completamente funcionales y accesibles. Incorpora una variedad de componentes personalizados y Hooks que pueden usarse dinámicamente en un proyecto.

Mantine ha sido ampliamente utilizado en una variedad de proyectos desde su inicio, con más de 23.000 descargas semanales . Algunas de las principales características asociadas con Mantine son las siguientes:

Primero está la tematización. Un tema de Mantine es solo un objeto que construye componentes de una manera única. Le permite extender la raíz de su aplicación con atributos y valores adicionales.

En segundo lugar están los componentes de Mantine, que se pueden reutilizar. Algunos componentes incluyen tipografía, modales, entradas y botones, entre otras cosas.

Finalmente, los ganchos únicos de Mantine. Mantine tiene varios ganchos para administrar el estado y la interfaz de usuario que se pueden usar para crear componentes personalizados.

Primeros pasos con Mantine

Para comenzar, generemos una plantilla predeterminada para Mantine. En su terminal, cree una nueva aplicación React y ejecute el siguiente comando:

yarn create react-app mantine-react-framework --template typescript

El siguiente paso es instalar los paquetes básicos de Mantine que nos permitirán utilizar características como componentes y Hooks. En su terminal, copie y pegue el siguiente comando:

yarn add @mantine/hooks @mantine/core

Ahora que se han instalado los paquetes, ejecute la aplicación para asegurarse de que todo funcione como debería.

Características destacadas de Mantine

Como se mencionó anteriormente, los componentes, las habilidades temáticas y los ganchos de Mantine hacen que se destaque de la competencia. En las siguientes secciones, veremos más de cerca estas funciones, por qué son particularmente útiles y aprenderemos a usarlas.

Componentes

En este segmento, veremos algunos de los componentes de Mantine que se destacan de otras bibliotecas.

Eche un vistazo al TransferList componente en el diseño a continuación. Cree una subcarpeta llamada components and pagesdentro de la srccarpeta. Cree un archivo llamado TransferList.tsxen la componentssubcarpeta. Copia y pega el siguiente código:

import { useState } from "react";
import { Text, TransferList, TransferListData } from "@mantine/core";

const initialValues: TransferListData = [
  [
    { value: "go", label: "GoLang" },
    { value: "js", label: "JavaScript" },
    { value: "ruby", label: "Ruby" },
    { value: "python", label: "Python" },
  ],
  [
    { value: "mongo", label: "MongoDB" },
    { value: "fauna", label: "FaunaDB" },
    { value: "cockroach ", label: "CockroachDB" },
  ],
];

const TransferListPage = () => {
  const [data, setData] = useState<TransferListData>(initialValues);
  return (
    <>
      <Text style={{ padding: "1rem" }} size="xl">
        Transfer List Component
      </Text>
      <TransferList
        value={data}
        onChange={setData}
        searchPlaceholder="Search..."
        nothingFound="Nothing here"
        titles={["Languages", "Databases"]}
        breakpoint="sm"
      />
    </>
  );
};

export default TransferListPage;

Ahora veamos algunos de los detalles en el código anterior.

El TransferListcomponente del paquete principal de Mantine se importó aquí y se representó como un componente independiente que maneja los datos dentro del TransferListDatacomponente. El TansferListDatacomponente es una variable que almacena una lista de información en forma de matriz de objetos.

El valor actual de TransferListDataestá indicado por la valueprop. Cuando el valor cambia, onChangese llamarán los accesorios.

La nothingFoundpropiedad actúa como un controlador de errores, mostrando un mensaje de error si no hay otras opciones disponibles, y la titlespropiedad le permite nombrar rápidamente una determinada columna.

El punto clave aquí es que estas acciones solo requieren dos componentes principales para comparar y transferir datos de una columna a otra. Esto ahorra tiempo y esfuerzo a los desarrolladores porque escribir toda la lógica desde cero requeriría muchas más líneas de código.

Considere la biblioteca MUI; requiere numerosos componentes para realizar estas actividades porque utiliza el sistema de cuadrícula buttony checkboxlos listcomponentes, lo que da como resultado muchas líneas de código que pueden no ser necesarias en Mantine. Mantine simplificó el uso de funciones de forma dinámica con componentes independientes.

Ejecutemos la aplicación y veamos cómo se ve el resultado. Pero antes de eso, tenemos que vincular los archivos.

Navegue a la pagessubcarpeta y cree un archivo llamado Home.tsx. Aquí es donde pondrás el enlace al TransferListarchivo que creaste antes. Copia y pega el siguiente código:

import TransferListPage from "../components/TransferListPage";

const Home = () => {
  return (
    <div style={{ padding: "2rem" }}>
      <TransferListPage />
    </div>
  );
};

export default Home;

Así es como debería verse su salida.

Ahora veamos otro componente: NumberInput.

Cree un archivo llamado NumberInput.tsxen la subcarpeta de componentes. Copia y pega el siguiente código:

import { NumberInput, Text } from "@mantine/core";

const NumberInputPage = () => {
  return (
    <>
      <Text style={{ marginTop: "2rem" }} size="xl">
        Number Input Component
      </Text>
      <NumberInput
        defaultValue={50}
        placeholder="Your age"
        label="Your age"
        required
      />
    </>
  );
};

export default NumberInputPage;

En el código anterior, NumberInputse importó un único componente del paquete principal de Mantine. Acepta varias propiedades, como defaultValue, label, requiredy placeholder.

Cuando se carga el navegador, defaultValuesimplemente indica un valor base fijo y labelfunciona como una etiqueta de título de nombre.

Como ha visto, se pueden realizar varias modificaciones de componentes con un solo componente independiente. No es necesario importar ningún componente adicional para agregar una etiqueta o una entrada.

Considere el NumberInputcomponente en la biblioteca de interfaz de usuario de Chakra . En lugar de proporcionar un componente de entrada única con opciones de accesorios, debe utilizar cinco componentes distintos. Esta estrategia puede parecer adaptable, pero es difícil trabajar con todos esos componentes introducidos solo para una acción. Esto se llama código hinchado.

Este es el aspecto que debería tener su salida para el NumberInputcomponente.

Tematización

A veces, puede ser difícil trabajar con el estilo predeterminado. El estilo predeterminado que se muestra cuando crea un proyecto puede no ser su favorito, por lo que Mantine le permite personalizar sus temas para que cada proyecto sea perfecto. ¡Veamos cómo funcionan las configuraciones de temas en Mantine!

Para modificar el tema general del sitio, utilice el MantineProvidercomponente. Si opta por utilizar el tema predeterminado, este paso no es necesario. La creación de temas le permite darle a su aplicación una apariencia uniforme y le permite modificar cada parte del diseño de su proyecto para que coincida con los requisitos únicos de su aplicación.

Hay dos métodos para configurar su tema: el método contenedor base y el método Hooks.

El método de envoltura base

Esto es simplemente usar el MantineProvidercomponente para envolver la base de una aplicación de proyecto (generalmente el app.jsxo app.tsx).

Navegue a la srccarpeta y cree una subcarpeta llamada utils, así como un archivo llamado theme.tsdentro de ella. Copie y pegue el siguiente código en su index.tsxarchivo:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MantineProvider } from "@mantine/core";
import theme from "./utils/theme";

ReactDOM.render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Si observa detenidamente el código anterior, notará que MantineProviderfunciona como un envoltorio, con una themepropiedad que extiende los estilos que deben anularse o modificarse del theme.tsarchivo. El theme.tsarchivo incluirá todos los parámetros de estilo de la aplicación.

Ahora, navegue a su theme.tsarchivo y copie el código a continuación:

import { MantineThemeOverride } from "@mantine/core";

const theme: MantineThemeOverride = {
  colorScheme: "dark",
  primaryColor: "green",
};

export default theme;

En este caso, el MantineThemeOverridetipo le permite almacenar un objeto de anulación de tema en una variable. Cabe señalar que puede configurar cualquier estilo dentro de este objeto; no se limita a colorShemey primaryColor.

La salida se muestra a continuación.

El método de los ganchos

¡La configuración parece ser más simple aquí! En lugar de envolver la aplicación en MantineProvider, se usará un gancho para devolver el tema desde el MantineProvidercontexto o el tema predeterminado.

Copie el siguiente código a continuación:

export const HooksWay = () => {
  const theme = useMantineTheme();
  return (
    <>
      <Text style={{ marginTop: "2rem" }} size="xl">
        Number Input Component Two
      </Text>
      <NumberInput
        style={{ background: theme.colors.dark[1]}}
        defaultValue={50}
        placeholder="Your age"
        label="Your age"
        required
      />
    </>
  );
};

useMantineThemeHook le permite conectarse al proveedor de Mantine sin hacer referencia a él en su aplicación raíz base .

Este patrón temático le permite personalizar fácilmente su componente sin anulaciones estrictas. La creación de temas tiene una amplia gama de aplicaciones, incluidos los diseños receptivos. Puede anular o configurar dinámicamente cualquier estilo o punto de interrupción (en términos de capacidad de respuesta), pero usaremos el punto de interrupción predeterminado en esta aplicación porque Mantine tiene un punto de interrupción estándar que ayuda en los diseños receptivos.

Ahora que hemos comprendido los fundamentos de la tematización, ¿qué tal si creamos un conmutador de tema dinámico con la ayuda de algunos paquetes de tematización como ColorSchemeProvider y ColorScheme?

Navegue hasta App.tsx, para que podamos modificar el archivo con algunos cambios. Copia y pega el siguiente código:

import { useState } from "react";
import {
  MantineProvider,
  ColorSchemeProvider,
  ColorScheme,
} from "@mantine/core";
import "./App.css";
import Home from "./pages/Home";

const App = () => {
  const [colorScheme, setColorScheme] = useState<ColorScheme>("light");
  const toggleColorScheme = (value?: ColorScheme) =>
    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));


  return (
    <div className="App">
      <ColorSchemeProvider
        colorScheme={colorScheme}
        toggleColorScheme={toggleColorScheme}
      >
        <MantineProvider theme={{ colorScheme }}>
          <Home />
        </MantineProvider>
      </ColorSchemeProvider>
    </div>
  );
};

export default App;

En el código anterior, ColorSchemeProvideradmite el cambio de esquema de color dinámico y ayuda a configurar el contexto del esquema de color.

ColorScheme, importado del paquete principal de Mantine, sirve como un alias de tipo que se pasa useStatepara una verificación de tipo estricta. Para manejar la acción del usuario, toggleColorScheme se creó una función que verificaba si una condición cumplía o no con un requisito.

Para que la lógica funcione, use useMantineColorSchemeHook para consumir el ColorSchemeProvidercontexto en cualquier lugar de su aplicación. Navegue a su Home.tsxarchivo y copie y pegue el siguiente código:

import { Button, useMantineColorScheme } from "@mantine/core";
import NumberInputPage from "../components/NumberInput";
import TransferListPage from "../components/TransferListPage";
import { UseDebouncedValuePage } from "../hooks/UseDebounce";
import { UseIdPage } from "../hooks/UseId";
import { UseIdlePage } from "../hooks/UseIdle";

const Home = () => {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const dark = colorScheme === "dark";
  return (
    <div style={{ padding: "2rem" }}>
      <Button
        color={dark ? "yellow" : "blue"}
        onClick={() => toggleColorScheme()}
      >
        Toggle Mode
      </Button>
      <TransferListPage />
      <NumberInputPage />
      <UseDebouncedValuePage />
      <UseIdlePage />
      <UseIdPage />
    </div>
  );
};

export default Home;

El colorSchemeestado que se creó se usaba internamente toggleColorSchemepara la representación condicional del modo claro y oscuro.

El siguiente es el aspecto que debería tener su salida.

Manos

Mantine usa ganchos para hacer la mayor parte del trabajo pesado. Te permite utilizar un Hook para cualquier actividad, hasta el más mínimo detalle. Explorar algunos de los ganchos de Mantine te dará una mejor comprensión de cómo usarlos.

use-debounced-value

Considere el siguiente escenario: busca un producto específico en un sitio de comercio electrónico y no puede encontrarlo. ¿A qué te dedicas? La mayoría de las personas continuaría manipulando el valor de entrada (el término de búsqueda) para obtener el nombre exacto del producto para que aparezca en el resultado de la búsqueda. Sin embargo, cuando comienza a modificar los valores de entrada para que se ajusten a su búsqueda, corre el riesgo de generar una representación excesiva de los componentes de React y consumir el ancho de banda de la API.

Los eventos de rebote, como su nombre lo indica, le permiten invocar una función que garantiza que una operación que requiere mucho tiempo no se active con tanta frecuencia. Es una función que toma una función como parámetro, la envuelve en un cierre y la devuelve, mostrando el comportamiento de "esperar un poco".

Si bien la implementación de esta acción puede requerir la creación de una lógica que consume mucho tiempo, Mantine le ofrece un Hook que hace todo el trabajo. Simplemente necesita usar el Hook en los lugares donde lo requiera en su aplicación.

Copie el siguiente código:

import { useState } from "react";
import { useDebouncedValue } from "@mantine/hooks";
import { TextInput, Text } from "@mantine/core";

export const UseDebouncedValue = () => {
  const [value, setValue] = useState("");
  const [debounced] = useDebouncedValue(value, 500);

  return (
    <>
      <TextInput
        label="Enter value to see debounce"
        value={value}
        style={{ flex: 1, marginTop: "2rem" }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Value: {value}</Text>
      <Text>Debounced value: {debounced}</Text>
    </>
  );
};

En el código anterior, la useBouncedValuefunción se importó y toma dos parámetros, valuey time. Valuerealiza un seguimiento del valor de entrada rebotado de un usuario y timefunciona de manera similar a un efecto de tiempo de espera.

Finalmente, useStaterealiza un seguimiento de los valores ingresados ​​por el usuario y los actualiza en tiempo real.

Así es como debería verse su salida.

use-idle

Este gancho detecta si el usuario no hace nada en la página y deja el componente inactivo.

Para verlo en acción, copie el siguiente código:

import { Badge, Button, Text } from "@mantine/core";
import { useIdle } from "@mantine/hooks";

export const UseIdlePage = () => {
  const idle = useIdle(2000, { events: ["click", "touchstart"] });
  return (
    <>
      <Text style={{ marginTop: "2rem" }} size="xl">
        UseIdle State
      </Text>
      <Button color={idle ? "gray" : "green"}>
        Current state: {idle ? "idle" : "not idle"}
      </Button>
    </>
  );
};

useIdleEl gancho importado acepta setTimeoutparámetros, así como eventos que escuchan eventos de clic y desplazamiento para determinar el estado de inactividad.

La idlevariable se usó en una verificación condicional para representar o activar el estado inactivo. Este gancho es útil cuando desea ejecutar una acción en función de si se cumplen o no ciertos criterios.

Su salida debe verse como la siguiente.

use-id

Este gancho genera automáticamente una identificación única para los elementos. Alivia el estrés de instalar paquetes externos como UUID npm en su aplicación.

Vamos a ver cómo funciona. Comienza copiando el siguiente código:

import { useState } from "react";
import { Button, List, Text } from "@mantine/core";
import { useId } from "@mantine/hooks";

export const UseIdPage = ({ id }: { id?: string }) => {
  const uuid = useId(id);
  const [state, setState] = useState(uuid);

  const generateId = () => {
    setState(uuid);
    window.location.reload();
  };

  return (
    <>
      <Text style={{ marginTop: "2rem" }} size="xl">
        UseId Hook
      </Text>
      <List>
        <List.Item>Logrocket - id - {state}</List.Item>
        <Button style={{ marginTop: "1rem" }} onClick={generateId}>
          Generate New ID
        </Button>
      </List>
    </>
  );
};

La use-idfunción genera una identificación aleatoria que se mantiene constante en todos los renderizados.

De forma predeterminada, useStateacepta el UUID y se actualiza cuando el usuario hace clic en el botón generar .

Su salida debe verse como la siguiente.

¡Hurra! Hemos terminado el proyecto. Así es como debería verse toda nuestra aplicación.

Conclusión

Mantine es una biblioteca de interfaz de usuario con componentes específicos y funciones de enlace que pueden mejorar en gran medida el rendimiento de su proyecto. Ahorra una cantidad significativa de tiempo debido a sus plantillas prediseñadas.

Mantine se ha destacado por su flexibilidad. Debido a su rigidez, es posible que MUI y Bootstrap no se recomienden por completo para su uso en una aplicación de proyecto grande si el diseño del diseño requiere una gran cantidad de implementaciones personalizadas.

A estas alturas, debería comprender bien cómo funciona Mantine, por qué es importante en las aplicaciones web y cómo configurar una aplicación web básica de Mantine.

Fuente: https://blog.logrocket.com/build-responsive-themes-components-mantine/

#mantine #bootstrap #mui