Search code examples
cssreactjsmaterial-uiemotion

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

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: enter image description here

But it looks like this: enter image description here

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

Solution

  • 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;