Web Dev 103- Material UI

7/6/25

Intro

Time to modernize the layout by migrating from global CSS to Material UI’s styling system, improving maintainability and theme consistency.

Material UI by OC Robotics

Create new branch and install MUI

• Create branch

git checkout -b webdev103

• Install dependencies

npm install @mui/material @emotion/react @emotion/styled

Refactor to MUI styling

• Clear index.css except for background color

index.css

body {
  background-color: #f0f8ff;
}

• Rewrite App.jsx using MUI’s component library and sx styling

App.jsx

import './App.css'
import { useState } from 'react';
import { Button, Typography, Container, Box } from '@mui/material';
 
function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
    console.log(`Button clicked ${count + 1} times`);
  }
 
  return (
    <>
      <Box
        sx={{
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <Container >
          <Typography
            variant="h3"
            gutterBottom
            sx={{
              textAlign: 'center',
              color: '#2c3e50',
              // fontSize: '3rem',
              marginBottom: '20px',
              animation: `pop-in 0.6s ease-out`,
              '@keyframes pop-in': {
                '0%': { transform: 'scale(0.5)', opacity: 0 },
                '100%': { transform: 'scale(1)', opacity: 1 },
              },
            }}
          >
            🎉React + Material UI🎉
          </Typography >
          <Button
            variant="contained"
            color="secondary"
            onClick={handleClick}
            sx={{
              mt: 3,
              '&:hover': {
                backgroundColor: `#1a252f`
              }
            }}
          >
            Count is {count}
          </Button >
        </Container>
      </Box >
    </>
  )
}
 
export default App

• Commit and push changes to webdev103 branch

git push origin webdev103

• The deployment should be triggered automatically, example:

Related

• Material UI