[RFC] How about using tss-react library in material-next-app-router-ts example

[LEv145]

What's the problem? 🤔

I think it's easier to add a dependency to the project than to maintain EmotionCache.tsx

What are the requirements? ❓

Add tss-react library to project

What are our options? 💡

No response

Proposed solution 🟢

Code with tss-react:

'use client';

import * as React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir"
import theme from './theme';

export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
  return (
    <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        {children}
      </ThemeProvider>
    </NextAppDirEmotionCacheProvider>
  );
}

Resources and benchmarks 🔗

No response

[mj12albert]

We are going to work on a dedicated integration package to abstract this away! #34575

[siriwatknp]

@LEv145 If you don't want to wait, you can start using tss-react right away. It's the same implementation.