Memories Initial Styles

app styles

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
  appBar: {
    borderRadius: 15,
    margin: '30px 0',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  heading: {
    color: 'rgba(0,183,255, 1)',
  },
  image: {
    marginLeft: '15px',
  },
}));

form styles

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  root: {
    '& .MuiTextField-root': {
      margin: theme.spacing(1),
    },
  },
  paper: {
    padding: theme.spacing(2),
  },
  form: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  fileInput: {
    width: '97%',
    margin: '10px 0',
  },
  buttonSubmit: {
    marginBottom: 10,
  },
}));

post styles

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles({
  media: {
    height: 0,
    paddingTop: '56.25%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    backgroundBlendMode: 'darken',
  },
  border: {
    border: 'solid',
  },
  fullHeightCard: {
    height: '100%',
  },
  card: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    borderRadius: '15px',
    height: '100%',
    position: 'relative',
  },
  overlay: {
    position: 'absolute',
    top: '20px',
    left: '20px',
    color: 'white',
  },
  overlay2: {
    position: 'absolute',
    top: '20px',
    right: '20px',
    color: 'white',
  },
  grid: {
    display: 'flex',
  },
  details: {
    display: 'flex',
    justifyContent: 'space-between',
    margin: '20px',
  },
  title: {
    padding: '0 16px',
  },
  cardActions: {
    padding: '0 16px 8px 16px',
    display: 'flex',
    justifyContent: 'space-between',
  },
});

posts styles

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  mainContainer: {
    display: 'flex',
    alignItems: 'center',
  },
  smMargin: {
    margin: theme.spacing(1),
  },
  actionDiv: {
    textAlign: 'center',
  },
}));

The makeStyles css isn't able to override the material ui component's style. Any sugesstions? I am using the newest version wherein I have imported from @mui/styles

How can i resolve this error .
Please HELP!!!!

You're the best, great tutorial!

Hello everyone you have to remember that technology is changing too fast for youtube tutorials to keep up... the best thing you can do is go into your package.json and make sure you are using the same versions as the presenter. As you get more skilled you will be able to overcome issues with newer tech.

How can i resolve this error . Please HELP!!!!

If anyone else gets this error from chokidar,, just delete your node-modules and package.lock .run npm install and restart server you will be good

Thank you for the wisdom you have bestowed upon us.

Thank you very much. this really helped me in my school project.

Thanks budy, You are a great Teacher

How can i resolve this error . Please HELP!!!!

If anyone else gets this error from chokidar,, just delete your node modules and package.lock .run npm install and restart the server you will be good

try npm install @mui/icons/core --force

hey in app bar when i tried flexDirection: 'row' by using classes it is not working instead of that i used inline style then only it is aligning in row before that it is aligning only in column. any one has any suggestions

thanks dude

Thanks master,

Thanks for everything. Great job on explaining.

This is all really great. I am pretty sure that I have followed everything exactly. but I am getting some errors this is at minute 59 of the part one video

react.development.js:220 Warning: Failed prop type: The prop `justify` of `ForwardRef(Grid)` is deprecated. Use `justifyContent` instead, the prop was renamed.
    at Grid (http://localhost:3000/static/js/bundle.js:1638:35)
    at WithStyles (http://localhost:3000/static/js/bundle.js:5219:31)
    at Transition (http://localhost:3000/static/js/bundle.js:49057:30)
    at Grow (http://localhost:3000/static/js/bundle.js:1870:24)
    at div
    at Container (http://localhost:3000/static/js/bundle.js:1325:23)
    at WithStyles (http://localhost:3000/static/js/bundle.js:5219:31)
    at App (http://localhost:3000/static/js/bundle.js:47:70)
    at Provider (http://localhost:3000/static/js/bundle.js:46487:20)

I am also getting a warning on body parser I tried updating it, but still gives me this

body-parser deprecated undefined extended: provide extended 
option file:\D:\......\index.js:12:20

This is my code, it seemed like this was the newest way to do it

import bodyParser from 'body-parser';

app.use(bodyParser.json({ limit: "30mb", exteneded: true}));
app.use(bodyParser.urlencoded({ limit: "30mb", exteneded: true}));

Any thoughts or ideas would be much appreciated. Its amazing how fast things have changed in 1 year.

Its because express now have its own body parser Change this:

import bodyParser from 'body-parser';

app.use(bodyParser.json({ limit: "30mb", exteneded: true}));
app.use(bodyParser.urlencoded({ limit: "30mb", exteneded: true}));

To this:

app.use(express.json({ limit: "30mb" }));
app.use(express.urlencoded({ extended: true, limit: "30mb" }));

Hi, This is the version issue of MUI and React please check the version and add the commands again in your client folder :
npm install @material-ui/core --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

This will work, let me know if it doesn't

replace:

How can i resolve this error . Please HELP!!!!

If anyone else gets this error from chokidar,, just delete your node-modules and package.lock .run npm install and restart server you will be good

for:
import { makeStyles } from '@mui/styles';

am gettiing an axios error 500 when trying to post??what can be the reason

This is all really great. I am pretty sure that I have followed everything exactly. but I am getting some errors this is at minute 59 of the part one video

react.development.js:220 Warning: Failed prop type: The prop `justify` of `ForwardRef(Grid)` is deprecated. Use `justifyContent` instead, the prop was renamed.
    at Grid (http://localhost:3000/static/js/bundle.js:1638:35)
    at WithStyles (http://localhost:3000/static/js/bundle.js:5219:31)
    at Transition (http://localhost:3000/static/js/bundle.js:49057:30)
    at Grow (http://localhost:3000/static/js/bundle.js:1870:24)
    at div
    at Container (http://localhost:3000/static/js/bundle.js:1325:23)
    at WithStyles (http://localhost:3000/static/js/bundle.js:5219:31)
    at App (http://localhost:3000/static/js/bundle.js:47:70)
    at Provider (http://localhost:3000/static/js/bundle.js:46487:20)

I am also getting a warning on body parser I tried updating it, but still gives me this

body-parser deprecated undefined extended: provide extended 
option file:\D:\......\index.js:12:20

This is my code, it seemed like this was the newest way to do it

import bodyParser from 'body-parser';

app.use(bodyParser.json({ limit: "30mb", exteneded: true}));
app.use(bodyParser.urlencoded({ limit: "30mb", exteneded: true}));

Any thoughts or ideas would be much appreciated. Its amazing how fast things have changed in 1 year.

Its because express now have its own body parser Change this:

import bodyParser from 'body-parser';

app.use(bodyParser.json({ limit: "30mb", exteneded: true}));
app.use(bodyParser.urlencoded({ limit: "30mb", exteneded: true}));

To this:

app.use(express.json({ limit: "30mb" }));
app.use(express.urlencoded({ extended: true, limit: "30mb" }));

Write justifyContent instead of justify

Try import { makeStyles } from '@mui/styles';
after doing npm i @mui/styles --force in the terminal
Whenever there is problem with any styles material ui package

Cannot find Post Detail Styles.

Thank your tutorial!

styling is not being applied
help????????????????????

This is all really great. I am pretty sure that I have followed everything exactly. but I am getting some errors this is at minute 59 of the part one video

react.development.js:220 Warning: Failed prop type: The prop `justify` of `ForwardRef(Grid)` is deprecated. Use `justifyContent` instead, the prop was renamed.
    at Grid (http://localhost:3000/static/js/bundle.js:1638:35)
    at WithStyles (http://localhost:3000/static/js/bundle.js:5219:31)
    at Transition (http://localhost:3000/static/js/bundle.js:49057:30)
    at Grow (http://localhost:3000/static/js/bundle.js:1870:24)
    at div
    at Container (http://localhost:3000/static/js/bundle.js:1325:23)
    at WithStyles (http://localhost:3000/static/js/bundle.js:5219:31)
    at App (http://localhost:3000/static/js/bundle.js:47:70)
    at Provider (http://localhost:3000/static/js/bundle.js:46487:20)

I am also getting a warning on body parser I tried updating it, but still gives me this

body-parser deprecated undefined extended: provide extended 
option file:\D:\......\index.js:12:20

This is my code, it seemed like this was the newest way to do it

import bodyParser from 'body-parser';

app.use(bodyParser.json({ limit: "30mb", exteneded: true}));
app.use(bodyParser.urlencoded({ limit: "30mb", exteneded: true}));

Any thoughts or ideas would be much appreciated. Its amazing how fast things have changed in 1 year.

Hii there, I think the CSS property that you are using 'justify' is not supported instead You can use 'justifyContent' to proceed next !!
Thank you...

Thanks Pratyush the style part started working with these dependencies :
npm install @material-ui/core --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

Nice one Great Man. You really doing a great Job

Thanks Pratyush the style part started working with these dependencies : npm install @material-ui/core --legacy-peer-deps npm install @mui/icons-material --legacy-peer-deps

thank you for this it really work

Thanks @AshleyDurano @wonderlandtech @faazah,

Nabar style??

warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning @ react-dom.development.js:86
re

didn't show my data on database

new version of mui do not support this, you can use "sx"
they said you should use mui system (npm install @mui/system @emotion/react @emotion/styled), but it works with npm install @mui/material @emotion/react @emotion/styled for me