material-ui VS antd

import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };

Enter fullscreen mode Exit fullscreen mode

step 7
we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.

import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../styles/theme';
import createEmotionCache from '../../src/lib/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}

const App = (props: MyAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    
      
        My page
        
      
      
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        
        
      
    
  );
};

export default App;

Enter fullscreen mode Exit fullscreen mode

Material-UI - 74K⭐

For some reason, you don't want to write in TS, and only in plain JS, but you want your project to have types available for other people who use Typescript. e.g. as it is done by mui project

I've tried using Next.js v11 and 12. I'm using a custom _app.js and _document.js as specified HERE. I'm confused to why it'd work locally but not on Vercel. Does anyone have any thoughts?

With over 73, 000 plus stars on GitHub, Material UI is one of the most popular UI component libraries which is based on the Google Material's Design. It comes with accessible and easily customizable components that can be used in your React projects. In addition, this open-source library has very detailed documentation to help navigate through the implementation of its features.

import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import createEmotionCache from '../utility/createEmotionCache'; export default class MyDocument extends Document { render() { return ( ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const originalRenderPage = ctx.renderPage; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); /* eslint-disable */ ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => function EnhanceApp(props) { return ; }, }); /* eslint-enable */ const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };

One of the benefits of using Material UI icons other than the fact that it’s huge with multiple variants is that it is supported by all major platforms, as well as browsers and if you ever get stuck you can definitely check out their GitHub repo. If that’s not enough, they have an entire page dedicated to support.

The one on the official MUI's Github repo featuring Next.js with TypeScript (my framework of choice) didn't follow standard Next.js folder structure.

Check out: Ant-Design

It is crucial to understand that nice-modal-react is not the modal component itself. You will need to create the actual modals yourself (or use pre-built components from UI libraries like Material UI, Ant design, or Chakra).

Ant Design - 77K⭐

Since it is a mapping app, include the following: ** turfjs https://turfjs.org/docs/ ** Ant.Design https://ant.design/ ** Redux ** OSM

I've been using Ant design components at work for about three years. It's been pretty painless but to be completely honest, there are a few negatives I can think of:

You're right as it probably won't work well with MUI [0] (formerly React Material) and similar options like Ant [1]. But they all accept a theme provider that could hook in to the Tailwind config. Never tried it though.

But a swell of less opinionated offerings [2] [3] [4] (more and more the popular anyways) work well with Tailwind. In fact, when writing your own libs, exposing a className prop makes them painlessly customisable.

0 - https://mui.com

1 - https://ant.design

2 - https://www.radix-ui.com/docs/primitives/overview/styling

3 - https://react-table.tanstack.com

4 - https://react-spectrum.adobe.com/react-aria/

Hello Everyone, so the question is what approach would you follow if you building a react app from scratch and with a design that's kinda unique and not based on existing design system, would you build something from scratch (buttons, typography, tables, layouts, cards etc..) and use tailwind or styled-components and make everything composable and atomic, or use an existing open source design system library (ant.design or rsuit, for example) and customize it? which approach is more reliable based on your experience?

Ant Design

Ant (React) or Ant (Vue)