2

I installed materialUI, emotion/react and emotion/styled as required but can't get MUI to work on my react app. Nothing shows up on my webpage and theres no errors or anything in the console

Here's the code:

import { Button } from '@mui/material';
import './App.css';

function App() {
    return (
        <div className='app'>
            <Button>Hello</Button>
        </div>
    )
}

export default App;

If I take away the MUI Button stuff, and simply put in an h1 tag, it works fine and shows up on the console/webpage, but anything MUI related doesn't

Santa
  • 41
  • 4

2 Answers2

2

try to wrap your code into <ThemeProvider>.

import { Button, ThemeProvider, createTheme } from '@mui/material';
import './App.css';

const theme = createTheme(); // You can customize the theme here if needed

function App() {
    return (
        <ThemeProvider theme={theme}>
            <div className='app'>
                <Button variant="contained" color="primary">Hello</Button>
            </div>
        </ThemeProvider>
    );
}

export default App;
Yash Parekh
  • 115
  • 8
  • Didn't seem to work – Santa Aug 07 '23 at 06:44
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 09 '23 at 10:33
0

After installing "@mui/material", "@emotion/styled", " @emotion/react" You simply need to import this way. And remove the default 'App.css"

import Button from '@mui/material/Button';

For more refer official Documentation

Dhruvil Mehta
  • 48
  • 3