Skip to content
Search

Material UI

lastmod 2023-12-02created 2022-08-1929 edits

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" />

Caveat: you cannot enter a color code in the color there. That is the theme's palette name. If you want to enter a color code, you need to enter it as follows. 

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

Icons

Material Design Icon

Usage is as follows: 

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

// ...

<CheckBoxOutlineBlank />;

TextField

Password output: 

<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>.

For reference, the case above is an issue that requires adding component="div" to Mui:ButtonBase.

See also

Favorite site

author Zer0 sitemap