學習筆記-Material UI 5 (MUI) MUI Responsive Blog

跟著教學影片走一次CRA，熟悉MUI使用方式

參考影片：Material UI 5 (MUI) React Tutorial | MUI Responsive Blog

參考程式碼：https://github.com/codingstrade/React-Material-UI-5-Responsive-Blog

環境建立

安裝

• cra
• mui

整理資料夾

public只留下index.html

src只留下App.js、index.js

好用的開發工具

• ES7+ React/Redux/React-Native snippets
• 相關介紹
• VSCode快捷件參考

原先遇到prettier 無法排版jsx，照著下面教學安裝就解決了
Day 9 | 如何在 React 專案設置 ESLint 和 Prettier

記錄學習到的寫法

選單的內容改成陣列儲存，在用map來讀取，還可以統一控管樣式

const MenuItems = [
  { Name: 'Home', Link: '/' },
  { Name: 'Products', Link: '#' },
  { Name: 'Portfolio', Link: '#' },
  { Name: 'Blog', Link: '#' },
  { Name: 'Contact Us', Link: '#' },
 ];



<Box sx={{ width: 350, height: '90vh' }}>
      {MenuItems.map((item) => (
       <MenuItem key={item.Name} sx={{ cursor: 'pointer', fontSize: '14px' }}>
        {item.Name}
       </MenuItem>
      ))}
</Box>

RWD善用xs\sm\md

<Box
     sx={{ width: { xs: '100%', sm: '50%', md: '40%' }, padding: { xs: 3, sm: 2, md: 20 } }}
>


<Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, sm: 2, md: 8 }} mt={8}>

圖片讀取方法

import Image from '../../static/Image.jpg';

<Box
    sx={{
     height: '250px',
     width: '100%',
     backgroundImage: `url(${Image})`,
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center',
     backgroundSize: 'cover',
    }}
 >

<CardMedia component='img' alt='green iguana' height='300px' image={Image} />

傳遞Image到子元件使用

//Rightbar.js
import Image from '../../static/Image.jpg';
import Card from '../card/Card';


<Card Image={Image} />

//Card.js

onst Card = ({ Image }) => {
 return (
  <Box>
   <Link to='/details' sx={{ textDecoration: 'none' }}>
    <CardMedia component='img' alt='green iguana' height='100%' image={Image} />
    <CardContent>
     <Typography gutterBottom variant='body1' align='center' component='div' color='tomato'>
      Climb
     </Typography>
     <Typography variant='h5' align='center' component='div'>
      Life is boring without Climbing!
     </Typography>
     <Typography variant='body2' align='center' component='div' color='text.blue'>
      it is climbers love
     </Typography>
    </CardContent>
   </Link>
  </Box>
 );
};

export default Card;

善用Stack搭配flex排版

<Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, sm: 2, md: 8 }} mt={8}>
     <Box flex={3} sx={{ padding: '18px 100px 100px 100px' }}>
      <Recents />
     </Box>
     <Box flex={1}>
      <Rightbar />
     </Box>
</Stack>

使用Grid排版

<Grid container rowSpacing={6} columnSpacing={{ xs: 1, sm: 2, md: 1 }}>
    <Grid item>
     <Card Image={Image} />
    </Grid>
    <Grid item md={6} xs={12}>
     <Card Image={Image} />
    </Grid>
    <Grid item md={6} xs={12}>
     <Card Image={Image} />
    </Grid>
    <Grid item md={6} xs={12}>
     <Card Image={Image} />
    </Grid>
    <Grid item md={6} xs={12}>
     <Card Image={Image} />
    </Grid>
</Grid>

Style修改樣式

const StyleTypography = styled(Typography)({
 margin: '25% 50px 25% 50px',
 background: 'white',
 opacity: '0.8',
});


<StyleTypography align='center' variant='h4'>
      Bouldering
</StyleTypography>