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',
  },
}));

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

Used:
npm uninstall @material-ui/core
npm install @mui/material @emotion/react @emotion/styled
npm install redux-thunk --legacy-peer-deps

But I still have dependency issues. Any thoughts?