Skip to content

Material UI

MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

Categories

Components

Chip 

<Chip label="primary" color="primary" />

주의사항은 저기의 color에 색상코드를 입력할 수 없다. 저건 테마의 팔레트 명이다. 생상코드를 입력하고 싶다면 다음과 같이 입력해야 한다. 

<Chip label={value} sx={{backgroundColor: bg, color: fg}} />

Icons

Material Design Icon

사용 방법은 다음과 같다: 

import CheckBoxOutlineBlank from '@mui/icons-material/CheckBoxOutlineBlank';

// ...

<CheckBoxOutlineBlank />;

TextField

비밀번호 출력: 

<TextField ref={x => this.password = x}
    hintText="Password"
    floatingLabelText="Password"
    type="password">
</TextField>

Custom Item 

import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';
import {styled} from '@mui/material/styles';
import Paper from '@mui/material/Paper';

const Item = styled(Paper)(({theme}) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function Search() {
  return (
    <div>
      <Box sx={{marginTop: 2, marginLeft: 2, marginRight: 2}}>
        <Grid container spacing={2}>
          <Grid xs={3}>
            <Item>item</Item>
          </Grid>
        </Grid>
      </Box>
    </div>
  );
}

Troubleshooting

The page size n is not preset in the xxx Add it to show the pagination select 

MUI: The page size `100` is not preset in the `rowsPerPageOptions` Add it to show the pagination select.

Warning: validateDOMNesting: A cannot appear as a descendant of B 

react-dom.development.js:86 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

참고로 위의 경우는 Mui:ButtonBase에 component="div"를 추가해야 하는 이슈이다.

See also

Favorite site