MUI v.5

material UI 는 version 5 를 사용한다.

 

교과서는 여기다. https://mui.com/

MUI: The React component library you always wanted

 

기본적인 import는 @mui/material 에서 가져오고

import { Stack, Typography, IconButton, styled, Button } from "@mui/material";

특별한 부속 코드가 있는 경우, 따로 가져온다.

import LinearProgress, { linearProgressClasses } from "@mui/material/LinearProgress";

icon은 @mui/icons-material 에서 확인하고 사용하되, 아이콘 중에서 접미어로 "Rounded"를 사용하는 것으로 선택하여 운영한다 (명칭의 중복을 피하기 위해서 임의로 선택)

import { FileDownloadRounded } from "@mui/icons-material";

material icons 는 여기에서,

https://mui.com/material-ui/material-icons/?theme=Rounded

Material Icons - Material UI

 

#1. Components

사용빈도가 높은 컴포넌트는 Stack (Box), Typography,  Button, TextField, Table, Radio Group, Switch, Dialog, Tabs 등이며,

Components 와 Components API 메뉴에서 예제를 확인할 수 있음. 항상 교과서를 곁에 두고 작업해야 빠르게 익숙해진다.

 

Radio Group 의 예제를 살펴보자.

import React, {useState} from 'react';
// 각각 분리해서 작성한 경우(크기를 줄일 수 있음)
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

export default function ControlledRadioButtonsGroup() {
  // state 선언
  const [value, setValue] = useState('female');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <FormControl>
    /*control 사용할 경우*/
      <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
      <RadioGroup
        aria-labelledby="demo-controlled-radio-buttons-group"
        name="controlled-radio-buttons-group"
        value={value}
        onChange={handleChange}
      >
      /* control안에 Radio Component를 태그로 넣어준다 */
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
      </RadioGroup>
    </FormControl>
  );
}

#2. 반드시 알아야할 정보

breakpoints 

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

theming & default theme

https://mui.com/material-ui/customization/how-to-customize/

How to customize - Material UI

sx = {{ }}  // v.5에 추가된 속성(style)

system 속성

<Button sx={{ mb: 3 }}>
// or
<Box mb={3}>
// or
<Box marginBottom={3}>

 

#3. Layout 관련 컴포넌트

1) Container

 - maxWidth

<Container maxWidth="sm">
	<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>

2) Stack 

Flex를 적용하는 방법

- direction

- justifyContent

- alignItems

- spacing

<Stack
    direction="column"
    justifyContent="flex-start"
    alignItems="center"
    width="340px"
    height={hasFire ? "690px" : "590px"}
    onClick={handleViewInfo ? handleViewInfo : null}
    sx={{
        backgroundImage: `url("/images/item/${hasFire ? "rocket-fire" : "rocket"}/${tRocket}.svg")`,
        bacakgroundSize: "cover",
        pt: "27px", // 높이조절
        cursor: handleViewInfo ? "pointer" : "default",
    }}>
    <Stack direction="row" position="relative" sx={{ height: "65px" }}>
        <img src="/images/profile/profile-level.svg" alt="레벨" style={{ width: "80px", height: "60px" }} />
        <Typography
            sx={{
                fontSize: "14px",
                color: "white",
                position: "absolute",
                top: 32,
                width: "100%",
            }}
            textAlign="center">
            레벨 {level}
        </Typography>
    </Stack>
    <Typography
        variant="h2"
        sx={{
            fontSize: "35px",
            textShadow: "0 4px 0 rgba(0, 0, 0, 0.16)",
            letterSpacing: name.length > 3 ? "0px" : "9.8px",
            height: "65px",
        }}>
        {name}
    </Typography>
    <Stack direction="column" justifyContent="center" alignItems="center">
        <img width="167px" height="167px" src={`/images/item/bg/${tBg}.svg`} alt="bg" />
        <img
            width="159px"
            height="159px"
            src={`/images/item/character/${tCharacter}.png`}
            alt="character"
            style={{ position: "absolute" }}
        />
        <img
            width="167px"
            height="167px"
            src={`/images/item/border/${tBorder}.svg`}
            alt="border"
            style={{ position: "absolute" }}
        />
    </Stack>
</Stack>

 

 

 

... 계속