I have the following code, that does not compiled:
import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {cyan, red} from 'material-ui/colors';
import { red400 } from 'material-ui/styles/colors';
const theme = createMuiTheme({
palette: {
primary: red400,
secondary: cyan,
},
});
const View = (props) => (
<MuiThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="title">
{props.title}
</Typography>
</Toolbar>
</AppBar>
</MuiThemeProvider>
);
export default View;
It says:
Failed to compile
./src/Dashboard/AppBar/Views/View.js
Module not found: Can't resolve 'material-ui/styles/colors' in '/home/developer/Desktop/react-reason/example/src/Dashboard/AppBar/Views'
What am I doing wrong?
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'; This component takes a theme property. It makes the theme available down the React tree thanks to React context. This component should preferably be used at the root of your component tree.
To solve the error "Module not found: Error: Can't resolve '@mui/material'", make sure to install the package by opening your terminal in your project's root directory and running the command npm i @mui/material @emotion/react @emotion/styled and restart your development server.
try this instead
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With