jaeserrr.log

default theme default theme에서 palette를 보자면 아래와 같습니다. Default theme - Material UI Here's what the theme object looks like with the default values. mui.com Palette 커스텀 Palette - Material UI The palette enables you to modify the color of the components to suit your brand. mui.com 저는 아래와 같이 myBlue 를 새로 정의해서 추가했습니다. import { createTheme, ThemeProvider, responsiveFontSizes, } from "@mui/material/style..

아래와 같이 줄바꿈이 적용되게 하려고 합니다. 현재 코드는 아래와 같습니다. import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined"; {`과학 공학`} white-space 속성(pre, pre-wrap, pre-line 차이) white-space 속성(pre, pre-wrap, pre-line 차이) 오늘은 요소 안에 공백 처리를 어떻게 할지 지정하는 속성입니다. white space란 여백이라고도 하는데 html에서는 공백, 공란으로 이해하면 됩니다. ▶태그 작 aboooks.tistory.com 위 블로그 글을 참고하여 줄바꿈을 적용하기 위해 아래와 같이 작성할 수 있습니다. {cont.icon} {`과학 공학`}

Material ui text ellipsis after two line How can I ellipsis a text after two line in material ui? Here https://material-ui.com/system/display/#text-overflow show for single line stackoverflow.com 컨텐츠 내용 ✨✨✨

styled() - MUI System Utility for creating styled components. mui.com 이전에 정리해놓은 기본 컴포넌트를 커스텀 하는 방법입니다. [Material Design] Material-UI(MUI)로 react & styled component 사용하기 ({ color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, padding: theme.spacing(1), borderRadius: theme.shape.borderRadius, })); export default function ThemeUsage() { return ( Styled div with th..

✨ Overriding nested component styles https://mui.com/material-ui/customization/how-to-customize/ How to customize - Material UI Learn how to customize Material UI components by taking advantage of different strategies for specific use cases. mui.com 💡중첩된 컴포넌트 style을 override 하기 위해선 컴포넌트의 css 클래스 이름을 사용해서 CSS selector를 작성 후, 커스텀해주면 됩니다. 예를 들어, 해당 컴포넌트의 클래스 이름이 MuiSlider-thumb 일 때, & .MuiSlider-th..

00. Masonry https://mui.com/material-ui/react-masonry/ React Masonry component - Material UI Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps. mui.com 높이가 제각각인 컴포넌트를 개성있게, 에쁘게 구현가능한 컴포넌트입니다. 높이가 달라도, 서로의 높이에 구애받지 않고 쫘라락 나열됩니다. 기본적인 코드는 아래와 같습니다.🌈 import * as React from 'react'; import Box from '@mui/material/Box'; import Maso..

모~~~든 정보를 한번에 가져와버리면, 비효율적이겠죠. 꽤나 많은 사이트에서 무한 스크롤로 이를 해결하는 것을 볼 수 있어요!😁😁 구현해봅시다!!! 우선, 최종적인 코드는 아래와 같습니다. 아래 예시는 영화 이름을 가져오는 API를 이용했습니다.🔥 import * as React from "react"; import { Select, MenuItem, FormControl, InputLabel } from "@mui/material"; export default function App() { const PANEL_HEIGHT = 240; // 패널 높이 /** 선택한 item */ const [selectItem, setSelectItem] = React.useState(""); /** 총 menu it..

https://mui.com/material-ui/react-progress/ Circular, Linear progress React components - Material UI Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. mui.com 진행바를 사용해서, 레벨바를 구현하겠습니다! 00. Linear progress 본모습은 원래 이렇게 생겼습니다. 01. Linear progress Customization mui에서 나온 것처럼, 이와 같이 커스텀 가능합니다. import { styled } from '@mui/material/style..

https://mui.com/system/display/ Display - MUI System Quickly and responsively toggle the display value of components and more with the display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. mui.com 제목 쓰고나서 보니, 말을 하다 만 것 같아서 좀 웃기다. (맘에 든다.) 위와 같은 식으로!! 일정 길이를 넘으면 ... 으로 생략 되는 걸 많이 보셨을 거에요! 이걸 구현할게요! 00. Text overflow :..

위와 같이 글자 수 제한 input 많이 보셨을 거에요!!! 또한, 비밀번호와 같이 보안문제를 위해 입력값이 안 보이도록 하는 input도 많이 보셨을 거에요!!! 구현해봅시다. 00. 글자 수 제한 import { TextField } from "@material-ui/core"; /** 닉네임 최대 길이 */ const NICKNAME_LIMIT = 20; /** 닉네임 입력값 */ const [values, setValues] = React.useState({ nickName: "" }); const handleChange = (nickName) => (event) => { setValues({ ...values, [nickName]: event.target.value }); }; ... TextF..