React - CSS FrameWork ㅡ MUI 사용하기 시작!

React - CSS FrameWork ㅡ MUI 사용하기 

#0. MUi 는 처음 써보는데 문서정리가 잘되있어서 빠르게 배울수 있다는 느낌을 받았다. 그래서 조금씩 알아가기로 함.

 

#1. 예제 1

 

import React, { useState } from "react";
import styled, { ThemeProvider } from "styled-components";

import NoSsr from "@material-ui/core/NoSsr";
import { Button, Container, Typography } from "@material-ui/core/";
import { makeStyles, createMuiTheme } from "@material-ui/core/styles";

import { palette, spacing, typography } from "@material-ui/system";

import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";

import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";

const theme = createMuiTheme();

const useStyles = makeStyles({
  root: {
    width: 500
  }
});
const Box = styled.div`${palette}${spacing}${typography}`;

export default function App() {
  const classes = useStyles();
  const [value, setValue] = useState(0);
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm">
        {value === 0 && (
          <NoSsr>
            <Box
              style={{ backgroundColor: "#cfe8fc", height: "80vh" }}
              color="primary.main"
              fontFamily="h6.fontFamily"
              fontSize={{
                xs: "h6.fontSize",
                sm: "h4.fontSize",
                md: "h3.fontSize"
              }}
              p={{ xs: 2, sm: 3, md: 4 }}
            >
              <div>@material-ui/system</div>
              <Button variant="contained" color="primary">
                Hello World
              </Button>
            </Box>
          </NoSsr>
        )}
        {value === 1 && (
          <NoSsr>
            <Box
              style={{ backgroundColor: "#cfe8fc", height: "80vh" }}
              color="primary.main"
              fontFamily="h6.fontFamily"
              fontSize={{
                xs: "h6.fontSize",
                sm: "h4.fontSize",
                md: "h3.fontSize"
              }}
              p={{ xs: 2, sm: 3, md: 4 }}
            >
              <div>제가 좋아하는 CSS 프레임 워크이죠</div>
              <Button variant="contained" color="primary">
                두배로 빨리 배우기
              </Button>
            </Box>
          </NoSsr>
        )}
        {value === 2 && (
          <NoSsr>
            <Box
              style={{ backgroundColor: "#cfe8fc", height: "80vh" }}
              color="primary.main"
              fontFamily="h6.fontFamily"
              fontSize={{
                xs: "h6.fontSize",
                sm: "h4.fontSize",
                md: "h3.fontSize"
              }}
              p={{ xs: 2, sm: 3, md: 4 }}
            >
              <div>허리가 아픈가요?</div>
              <Button variant="contained" color="primary">
                곱게 피세요
              </Button>
            </Box>
          </NoSsr>
        )}
        <BottomNavigation
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
          showLabels
          className={classes.root}
        >
          <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
          <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
          <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
        </BottomNavigation>
      </Container>
    </ThemeProvider>
  );
}

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA