MUI
-
MUI - 모달로 슬라이더 만들기MUI 2022. 7. 29. 05:00
MUI의 모달을 사용하여 모달 안에서 슬라이드를 구현해보자. import 부분 나는 Marsonry라는 레이아웃을 적용하였다. 똑같이 적용하고 싶다면 @mui/lab을 설치하면 된다. import React, { useState } from 'react'; import styled from '@emotion/styled'; import { Masonry } from '@mui/lab'; import { Box, Modal, IconButton, Typography } from '@mui/material'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-mat..
-
Mui - ProgressbarMUI 2022. 7. 20. 02:41
Mui의 Progressbar를 수정하는 방법을 알아보자. 나는 로딩 상태가 아닌 멈춰있는 상태로 수정해야 했다. 먼저. import! import LinearProgress from '@mui/material/LinearProgress'; 컴포넌트 생성 정적인 상태를 원한다면 variant를 determinate로 선언해주어야 한다. 스타일 컴포넌트 const BorderLinearProgress = styled(LinearProgress)` .MuiLinearProgress-barColorPrimary { background-color: orange; } `; 생각보다 간단하다. 공식 홈페이지에서 찾아보면 더 많은 예시를 찾을 수 있을 것이다. const BorderLinearProgress = st..
-
MUI - TextFieldMUI 2022. 7. 16. 02:35
Mui의 TextField를 수정하는 방법을 알아보자. Mui의 거의 대부분 컴포넌트의 기존 색들은 Mui의 고유 색인 하늘색을 띤다. 하지만 사이트마다 사용해야 할 색상이 다르기 때문에 수정해야 할 일이 생긴다. 그럼 수정하면 된다 라고 생각할 수 있지만 Mui는 이미 우리가 사용하기 좋게 누군가가 코드를 작성해놓은 상태라 생각보다 style 값들을 변경하는 것이 쉽지 않다. Mui를 사용하는 중이라면 이미 알고 있을 것이다. 그중에 바꾸기 어려운 요소였던 TextField를 소개하고 내가 수정한 부분까지의 코드를 공개한다. 먼저 TextField 그 자체의 상태이다. 번거로움을 피하기 위해 css-in-js인 sx 만을 사용해서 커스텀하겠다. import { Box, TextField } from '..
-
MUI - BoxMUI 2022. 7. 16. 02:02
Mui에서 지원하는 css-in-js인 Box를 알아보자. Box는 곧 style이다. 실제로 하는 역할이 같다. import Box from '@mui/material/Box'; 기존 JSX 문법에 따라서 스타일을 적용하는 방법 또한 같다. 하지만 mui의 스타일 가이드를 따라서 사이트의 ui를 구축하는 것이니까 div 보다는 Box(component)를 사용하는 것이 좋겠다. import Box from '@mui/material/Box'; e.preventDefault()} label="배우 이름" />
-
MUI를 사용하는 방법MUI 2022. 7. 6. 00:52
한국말로는 MUI 사용하는 방법이 많이 나와있지는 않아 내가 사용한 코드와 커스텀하는 방법들에 대해서 글을 남기려 한다. MUI는 React의 UI 라이브러리이다. 사용방법은 생각보다 간단하다. 그걸 커스텀하는게 생각보다 쉽지 않을 뿐 사용방법 (컴포넌트 Autocomplete를 예시로 설명하겠다.) mui를 설치한다. mui는 emotion 과 styled-component 둘 다 사용가능하다. // npm npm install @mui/material @emotion/react @emotion/styled //yarn yarn add @mui/material @emotion/react @emotion/styled 2. 페이지의 좌측에 있는 메뉴 중에 components을 클릭하여 나의 웹 사이트에 적..