DEV Community

Dhiman_aman
Dhiman_aman

Posted on

Create React page with Dark mode using Material UI

Prerequisite

  • Material UI Install
  • React APP Installation

Let's Starts

First install the MUI material
for npm
npm install @mui/material @emotion/react @emotion/styled

or for yarn

yarn add @mui/material @emotion/react @emotion/styled

In App.js

  • Import the file from mui/material
    Image description

  • createTheme use to set the theme

  • ThemeProvider use to set the theme

  • use Create theme
    let theme = createTheme({
    palette: {
    mode: "dark",
    },
    });

then in the return function App()
<ThemeProvider theme={theme}>
<Table />
</ThemeProvider>

  • Final, use CssBaseline from @mui/material

Adding inside of the component will also enable dark mode for the app's background.

<ThemeProvider theme={theme}>
<CssBaseline />
<main>Hello this is testing</main>
</ThemeProvider>

All Sets, Let Run the App

npm start

Top comments (0)