MUI ???? ??

MUI(Material-UI)? ???? ???? ????? ???? ? ?????? ??? ????? ?? ?? React UI ????????. ?? ??, Stack, Select, Card, Accordion, ??? ? ??, MUI ??? ???? ???? ????? ?? ??? ?????.

? ?????? ??? ?? ??? ????? ???? ???? ? ??? ?? ?? ?? ?? ??? ?? ??? ????? ???? ?? ???? ??? ?????. ????? ??? ????? ? ??? ?? MUI? ? ??? ?? ??? ?? ? ????.

?? ??

MUI ?? ??? ???? ?? ?? ??? ?????? ?????. ? ?????? ??? React? ?? ???? ??? ?? ?? React ??????? ????? ?????. ?? ????? ? ??? ??? ??? ????? ????? ????? ?? ?? ?? ???

Vite? ??? ???. React? Vite? ???? ??? ??? ???? ?? React? Vite ?? ???? ?????.

?? ?????

Material-UI(MUI)? ???? ??? ?????. ?? ??? ???? ???:

npm install @mui/material @emotion/react @emotion/styled

React ??????? ???? ?? ??? MUI ?????

?? ??

MUI(Material-UI)? ??????? ?? ?? ???? ??? ???? ???? ??? ?? ???? ?????. ?? ??? ??, ???, ?? ?? ???? ???? ??? ????.

MUI?? ?? ??? ???? ??? ??? ????.

1. ?? ???? ????: createTheme? ???? ??? ?? ??? ???? ThemeProvider? ????? ?????.

2. ?? ??: ???, ?????? ? ?? ??? ??? ?? ?? ?????.

3. ?????? ??: ThemeProvider? ???? ?? ??? ?? ??? ??? ?????.

?: ??? ?? ?? ?? ? ??

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button } from '@mui/material';

// Define a custom theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // Primary color
    },
    secondary: {
      main: '#dc004e', // Secondary color
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Primary Button
      </Button>
      <Button variant="outlined" color="secondary">
        Secondary Button
      </Button>
    </ThemeProvider>
  );
}

export default App;

??? ?? ?:

• ?? ??: ???? ???? ?? ?? ??? ??? ???? ? ?? ??? ?? ??? ?????.
• sx Prop ??: ?? ???? ?? ??? ??? ?? MUI? sx Prop? ???? ??? ????? ???? ????? ???? ? ????.

??? ???? ??? ??? ????? ???? ???? ? ??? ?? ?? ????? ???? ? ????.

?? MUI ?? ??

MUI? UI ??? ????? ?? ??? ?? ??? ?????. ????? ?? ????? ???? ?? ??, ?? ??? ? ??? ?? ??? ?????.

1. MUI ????

????? ?? ??? ??? ??? ???? ??? ??? ??????.

?? ?:

npm install @mui/material @emotion/react @emotion/styled

?? ??:

• freeSolo? ???? ???? ??????.
• groupBy? ??? ?? ??.
• ???? ?? ???? ??? ?????.

2. MUI ??

??? ?? ??? 1?? ????(?? ?? ??)?? ?????.

?? ?:

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button } from '@mui/material';

// Define a custom theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // Primary color
    },
    secondary: {
      main: '#dc004e', // Secondary color
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Primary Button
      </Button>
      <Button variant="outlined" color="secondary">
        Secondary Button
      </Button>
    </ThemeProvider>
  );
}

export default App;

?? ??:

• ??(?, ?) ? ??? ?????.
• ?? ????? ?? ??? ??? ?????.

3. MUI ??

??? ??? ??? ?? ???? ?? ?????.

?? ?:

import React from 'react';
import { Autocomplete, TextField } from '@mui/material';

const options = ['Option 1', 'Option 2', 'Option 3'];

function AutocompleteExample() {
  return (
    <Autocomplete
      options={options}
      renderInput={(params) => <TextField {...params} label="Select an Option" />}
    />
  );
}

export default AutocompleteExample;

?? ??:

• CardMedia? ???? ???? ?????.
• CardActions? ??? ?????.

5. MUI ????

Accordion? FAQ? ?? ?? ??? ??? ?????.

?? ?:

import React from 'react';
import { Stack, Button } from '@mui/material';

function StackExample() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="contained">Button 1</Button>
      <Button variant="outlined">Button 2</Button>
    </Stack>
  );
}

export default StackExample;

?? ??:

• ??? ???? ?? ? onChange? ?????.
• disableGutters? ???? ??? ?????.

6. MUI ???

???? ???? ?? ??? ????? ?????.

?? ?:

import React, { useState } from 'react';
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';

function SelectExample() {
  const [value, setValue] = useState('');

  const handleChange = (event) => setValue(event.target.value);

  return (
    <FormControl fullWidth>
      <InputLabel>



<p><strong>Customization:</strong>  </p>

<ul>
<li>Enable multiple selections with multiple.
</li>
<li>Render custom items with renderValue.</li>
</ul>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173546599689834.jpg"  class="lazy" alt="MUI Components: Your Complete Guide to Building Modern React UIs" /></p>

<h4>
  
  
  <strong>4. MUI Card</strong>
</h4>

<p>Card displays structured content like text, images, and actions.</p>

<p><strong>Basic Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';
import { Card, CardContent, Typography } from '@mui/material';

function CardExample() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5">Card Title</Typography>
        <Typography variant="body2">Card Content</Typography>
      </CardContent>
    </Card>
  );
}

export default CardExample;

?? ??:

• ??? ???? ?????.
• sx? ???? ?? ?? ?? ??? ?? ???? ?????.

![MUI ???(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6oockmr57d8wgj659hy.png)

7. MUI ??

??? ????? ???? ???? ??? ???????.

?? ?:

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

function AccordionExample() {
  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>Accordion Title</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>Accordion Content</Typography>
      </AccordionDetails>
    </Accordion>
  );
}

export default AccordionExample;

?? ??:

• ?? ??? ??? ?????.
• ???? ???? ? ??? ??? ?????.

??? ?? MUI ?? ??? ????? ???? ??? ?????? ??? ?? ??? ?????. ??? ?? ??? ?? ??? ?? ???? ?? ??? ?? ?? ??? ? ????.

MUI ?? ?? ??? ?? ?? ??

Material-UI(MUI)? ???? ????? ???? ?? ???? ?????? ?? ?? ??? ?????.

1. ???? ?? ?? ??

• ??: MUI? ?? ???? ???? ???? ???? ???? ??? ???? ???? ?? ??? ?????.
• ??: createTheme? ???? ??? ?? ??? ???? ThemeProvider? ???? ????? ?????. ??? ?? ?? ?? ???? ??, ??? ? ??? ???? ?????.
• ?: ??? ???? ?????? ??? ?? ?? ? ?? ???? ?????? ???? ?????.

2. ?? ??? ??? ?? sx Prop? ?????

• ??: sx prop? ?? CSS ?? ?? ?? ??? ?? ???? ???? ??? ??? ?????.
• ??: ??? ??? ???? ?? ??? ?? ?? ?? ?? ?? sx prop? ?????.
• ?:

npm install @mui/material @emotion/react @emotion/styled

3. ?? ???? ?? ???

• ??: ?? ??? ??? ?? ????? ????? ?? ?? ??? ?????.
• ??: React?lazy() ? Suspense? ???? ??? ?? MUI ?? ??? ?????.
• ?:

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button } from '@mui/material';

// Define a custom theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // Primary color
    },
    secondary: {
      main: '#dc004e', // Secondary color
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Primary Button
      </Button>
      <Button variant="outlined" color="secondary">
        Secondary Button
      </Button>
    </ThemeProvider>
  );
}

export default App;

4. ???? ?? ??? ???? ?????

• ??: ??? ????? ?? ???? ??? ??? ??? ?????.
• ??: xs, sm, md ?? ?? ???? ?? ?? ?? ?? ??? ??? ?? sx prop? ?????.
• ?:

import React from 'react';
import { Autocomplete, TextField } from '@mui/material';

const options = ['Option 1', 'Option 2', 'Option 3'];

function AutocompleteExample() {
  return (
    <Autocomplete
      options={options}
      renderInput={(params) => <TextField {...params} label="Select an Option" />}
    />
  );
}

export default AutocompleteExample;

5. ??? ???? ??? ????

• ??: sx prop? ????? ??? ??? ???? ??? ???? ??? ???? ???? ? ????.
• ??: ??? ???? ???? ???? ?? makeStyles ?? ??? API? ?????.

6. ?? ??? ?? ?? ?? API ????

• ??: MUI ?? ??? ?? ??? ??? ??? ???? API? ?????.
• ??: MUI ??? ????? ???? ?? ??? ?? Select? MenuProps ?? Autocomplete? renderInput? ?? ??? ?????.

7. ??? ??(A11y)

• ??: ???? ?? ??? ?? ???? ??? ?? ???? ??????? ??? ? ????.
• ??: ??? HTML ? aria-* ??? ?? ??? ??? ?????. ?? ?? Accordion? aria-expanded? ????? ?? ?? ??? aria-labelledby? ?????.

8. ?? ? ???? ?? ???

• ??: ?? MUI ?? ??? ?? ??? ???????? ??? ??? ??? ?? ? ????.
• ??: React DevTools ? Lighthouse? ?? ??? ???? ??? ???? ?? ??? ?????.

9. MUI ??? ?? ??? ?????

• ??: MUI? ????? ??? ??? ?? ??? ????? ????? ?? ?????.
• ??: ?? ???? ????, ?? ??, ? ???? ????? ?????.

10. ???? ?? ?? ?? ???

• ??: ?? ??? ????? ?? ??? ???? ???? ?????.
• ??: ?? UI ??? ??? ??? ????(?: ??, ??, ??)? ????? ???? ??? ?????.

??? ?? ??? ??? MUI? ???? ??? ????? ????? ?? ???? ?? ??? ??? ??????? ??? ? ????.

??

MUI(Material-UI) ?? ??? ???? ??? ?? ? ??????? ??? ?? ???? ???? ????? ??????. ? ???? ??? ?? ??? ??? ??? ??? ????? ???? ??? ???? ??? ??? ?? ??? ?????? ?? ? ????. ????? ??? ????? MUI? React ????? ????? ???? ? ?? ??? ?????.

? ??? MUI ?? ??: ?? React UI ??? ?? ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!