본문 바로가기
반응형

라이브러리/무이5

[MUI] MUI 예제: 4. Theming MUI 예제: 4. ThemingcreateTheme과 ThemeProvider를 사용하면 애플리케이션 전체의 디자인을 일관되게 관리하고 변경할 수 있습니다.커스텀 테마 생성 및 적용createTheme으로 테마 객체를 만들고, ThemeProvider로 앱의 최상단을 감싸서 테마를 적용합니다.import * as React from 'react';import { createTheme, ThemeProvider } from '@mui/material/styles';import Button from '@mui/material/Button';import Stack from '@mui/material/Stack';// 새로운 테마 정의const theme = createTheme({ palette: { .. 2025. 9. 26.
[MUI] MUI 예제: 3. `sx` Prop을 이용한 커스터마이징 MUI 예제: 3. sx Prop을 이용한 커스터마이징MUI v5부터 도입된 sx prop은 컴포넌트에 직접 CSS를 적용하는 매우 강력한 방법입니다. 테마의 값에 접근할 수 있어 일관성을 유지하기 좋습니다.기본 사용법CSS 속성을 객체 형태로 전달합니다.import * as React from 'react';import Box from '@mui/material/Box';export default function SxProp() { return ( );}반응형 스타일링sx prop 내에서 배열을 사용하여 breakpoint별로 다른 스타일을 적용할 수 있습니다.배열의 값은 xs, sm, md, lg, xl 순서에 해당합니다.import Button from '@mui/material/Butt.. 2025. 9. 26.
[MUI] MUI 예제: 2. 레이아웃 MUI 예제: 2. 레이아웃MUI는 강력한 레이아웃 시스템을 제공합니다.Grid반응형 레이아웃을 위한 12컬럼 그리드 시스템입니다. xs, sm, md, lg, xl prop을 사용하여 breakpoint에 따른 컬럼 수를 지정할 수 있습니다.import * as React from 'react';import { styled } from '@mui/material/styles';import Box from '@mui/material/Box';import Paper from '@mui/material/Paper';import Grid from '@mui/material/Grid';const Item = styled(Paper)(({ theme }) => ({ backgroundColor: theme.pa.. 2025. 9. 26.
[MUI] MUI 예제: 1. 기본 컴포넌트 MUI 예제: 1. 기본 컴포넌트MUI는 다양한 기본 UI 컴포넌트를 제공합니다.Buttonvariant prop으로 버튼의 스타일을 지정할 수 있습니다. (contained, outlined, text)import * as React from 'react';import Stack from '@mui/material/Stack';import Button from '@mui/material/Button';export default function BasicButtons() { return ( Text Contained Outlined );}TextField표준 입력 필드입니다. label과 variant를 지정할 수 있습니다.import * as React fr.. 2025. 9. 26.
[MUI] Material UI 주요 기능 정리 MUI (Material-UI) 주요 기능 정리MUI는 구글의 Material Design을 구현한 React UI 라이브러리입니다. 풍부하고 일관된 디자인의 컴포넌트를 제공하여 개발자가 빠르고 미려한 UI를 구축할 수 있도록 돕습니다.핵심 특징1. 포괄적인 컴포넌트 시스템MUI는 UI 개발에 필요한 거의 모든 종류의 컴포넌트를 제공합니다.Layout: Grid, Box, Container, Stack 등 반응형 레이아웃을 쉽게 구성할 수 있습니다.Inputs: Button, TextField, Select, Checkbox, Slider 등 다양한 입력 폼을 만들 수 있습니다.Navigation: AppBar, Tabs, Drawer, Menu, Breadcrumbs 등 앱의 네비게이션 구조를 담당합니.. 2025. 9. 26.
반응형

티스토리툴바