Atualização de 'ReactDOM.render' para 'createRoot'

A implementação da solução sugerida pela Thaís foi realmente de grande ajuda. No entanto, ao abrir o console do navegador, você se deparou com o erro "react-dom.development.js:86 Aviso: ReactDOM.render não é mais suportado no React 18. Use createRoot em vez disso.".

Aqui está uma descrição do erro e como resolvê-lo:

Erro:

O erro "ReactDOM.render não é mais suportado no React 18. Use createRoot em vez disso" ocorre quando você tenta usar ReactDOM.render para renderizar seu aplicativo no React 18. Isso acontece porque o React 18 não suporta mais a função ReactDOM.render e, em vez disso, você deve usar createRoot para renderizar seu aplicativo.

Resolução:

Importe a função createRoot: Em React 18, para criar uma raiz de renderização, você precisa importar a função createRoot do módulo 'react-dom/client'. Certifique-se de que você tenha essa importação em seu código.

Crie uma raiz de renderização: Em vez de usar ReactDOM.render, você deve criar uma raiz de renderização usando createRoot. Para fazer isso, chame createRoot e passe o elemento do DOM onde você deseja renderizar seu aplicativo, geralmente obtido com document.getElementById('root').

Continue com a renderização: Após criar a raiz de renderização, você pode continuar com a renderização do seu aplicativo da mesma maneira que faria com ReactDOM.render. Coloque todo o código de renderização dentro da função root.render e certifique-se de que o aplicativo seja renderizado corretamente.

O código final deve estar assim:

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { StyledEngineProvider } from "@mui/material/styles";
import React from "react";
import { createRoot } from 'react-dom/client';
import "./index.css";
import Login from "pages/Login";

const container = document.getElementById('root');
const root = createRoot(container);

const theme = createTheme({
  palette: {
    primary: {
      main: "#2A9F85",
    },
    secondary: {
      main: "#FF7070",
    },
  },
});

root.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Login />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>
);

Essas etapas garantem que seu aplicativo React funcione sem erros relacionados à função ReactDOM.render no React 18.

Caso tenha deixado passar alguma coisa, por favor, mencione nos comentários.