Question 224715 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can't get Material UI (MUI) to work in my react app

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

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search