Resolved: How can I style it with @emotion/styled? Old makestyles from mui issue

In this post, we will see how to resolve How can I style it with @emotion/styled? Old makestyles from mui issue

Question:

I’m trying to set up my style via @emotion, since makestyles were removed in React 18. I changed the code in this way in line with my research, but I still can’t see any change in my page.
Normally it should look like this:

But it looks like this:

App.js file

import React from 'react';
import { Typography, AppBar } from '@mui/material';
import styled from '@emotion/styled';
import VideoPlayer from './components/VideoPlayer';
import Options from './components/Options';
import Notification from './components/Notification';


// * Style dosyası bağlandı
const useStyles = styled(theme => ({
  appBar: {
    borderRadius: 15,
    margin: '30px 100px',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '600px',
    border: '2px solid black',

    [theme.breakpoints.down('xs')]: {
      width: '90%',
    },
  },
  image: {
    marginLeft: '15px',
  },
  wrapper: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
  },
}));

const App = () => {
  // * Style dosyası çağırıldı
  //* className olarak elementlere tanımlandı
  const classes=useStyles();

  return (
    <div className={classes.wrapper}>
      <AppBar className={classes.appBar} position='static' color='inherit'>
        <Typography variant='h2' align='center'>
          Video Conferencing App
        </Typography>
      </AppBar>
      <VideoPlayer />
      <Options>
        <Notification />
      </Options>
    </div>
  )
}

export default App

Best Answer:

Two examples are presented below: One with styled, one without. It is not necessary to use styled. As you can see from the examples the code without styled is less verbose and (in my opinion) easier to understand.
In the examples the VideoPlayer, Options and Notification components were replaced with div and span for testing.

Example with styled

import React from 'react';

import { Typography, AppBar } from '@mui/material';
import { createTheme } from '@mui/material/styles';
import styled from '@emotion/styled';

// import VideoPlayer from './components/VideoPlayer';
// import Options from './components/Options';
// import Notification from './components/Notification';

const theme = createTheme();

// * Style dosyası bağlandı
const appBarStyles = {
    borderRadius: 15,
    margin: '30px 100px',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '600px',
    border: '2px solid black',

    [theme.breakpoints.down('xs')]: {
        width: '90%'
    }
};

const imageStyles = {
    marginLeft: '15px'
};

const wrapperStyles = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%'
};

const App = () => {
    // * Style dosyası çağırıldı
    //* className olarak elementlere tanımlandı
    // const classes=useStyles();
    const AppBarStyled = styled(
        ( { className, ...props } ) => (
            <AppBar className={ className } position='static' color='inherit'>
                <Typography variant='h2' align='center'>
                    Video Conferencing App
                </Typography>
            </AppBar>
        )
    )( ( { theme, ...props } ) => appBarStyles );

    const AppStyled = styled(
        ( { className, ...props } ) => (
            <div className={ className }>
                <AppBarStyled />
                <div>Video Player</div>
                <div>
                    <span>Options</span>
                </div>
            </div>
        )
    )( ( { theme, ...props } ) => wrapperStyles );

    return (
        <AppStyled />
    )
}

export default App;

Example without styled

import React from 'react';

import { Typography, AppBar } from '@mui/material';
import { createTheme } from '@mui/material/styles';
// import styled from '@emotion/styled';

// import VideoPlayer from './components/VideoPlayer';
// import Options from './components/Options';
// import Notification from './components/Notification';

const theme = createTheme();

// * Style dosyası bağlandı
const appBarStyles = {
    borderRadius: 15,
    margin: '30px 100px',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '600px',
    border: '2px solid black',

    [theme.breakpoints.down('xs')]: {
        width: '90%'
    }
};

const imageStyles = {
    marginLeft: '15px'
};

const wrapperStyles = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%'
};

const App = () => {
    // * Style dosyası çağırıldı
    //* className olarak elementlere tanımlandı
    // const classes=useStyles();

    return (
        <div style={ wrapperStyles }>
            <AppBar sx={ appBarStyles } position='static' color='inherit'>
                <Typography variant='h2' align='center'>
                     Video Conferencing App
                </Typography>
            </AppBar>
            <div>Video Player</div>
            <div>
                <span>Options</span>
            </div>
        </div>
    )
}

export default App;

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com