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

MUI? ?? ??:

1. ?? ???? ?? ??: MUI? ??, ??? ??, ?? ??, ?? ?? ?? ?? ??? ? ?? ??? ?? ??? ?????. ??? ????? ???? ??? ??? ????? ???? ????? ???? UI? ?? ??? ? ????.

2. ??? ?? ? ?? ?? ??: MUI? ??? ??? ??? ?????. ???? ?? ???? ????? ??? ?? ??? ?? ? ????. ??, ??, ?? ? ?? ?? ??? ???? UI? ???? ?? ?? ? ????.

3. ???: MUI? ?? ??? ????? ????? ???????. ?, ?? ??? ??? ?? ???? ?????.

4. ???: MUI ?? ??? ???? ??? ?? ??????? ?? ??? ??????? ? ?? ??? ? ????.

5. ???: MUI? ?????? ?? ??? ??? ? ?? ???? ???? ??? ??? ??? ?????.

6. React?? ??: MUI ????? React? ???? ???? ?? ?? ? ??? ??? ????.

MUI? ???? ??

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

1. MUI ??:

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

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

MUI?? ??? ??? ?? @emotion/react ? @emotion/styled? ?????.

1. ??? MUI ?? ?? ??:

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

 'react'?? React? ?????.
   '@mui/material/Button'?? ?? ????;

   ?? ?() {
     ?? (
       <div>



<p>? ???? MUI?? Button ?? ??? ??? ? ??? ?????. Variant="contained" ??? ??? ?? ???? ???? color="primary"? ?? ??? ?? ??? ?????.</p>

<ol>
<li>
<strong>??? MUI ??? ??</strong>:</li>
</ol>

<p>MUI? ? ???? ??? ??? ? ?? ThemeProvider ?? ??? ?????. ??, ??, ??? ???? ??? ?? ??? ? ????.</p><p>??? ?? ??? ???? ????.<br>
</p>

<pre class="brush:php;toolbar:false"> 'react'?? React? ?????.
   import { Button, ThemeProvider, createTheme } from '@mui/material';

   // ??? ?? ?? ???
   const ?? = createTheme({
     ???: {
       ???: {
         main: '#FF5733', // ??? ?? ?? ??
       },
       ??: {
         main: '#33FF57', // ?? ?? ??
       },
     },
   });

   ?? ?() {
     ?? (
       <ThemeProvider ??={??}>
         <div>



<p>? ???? ??? ?? ??? ?? ???? ??? ?? ??? ??? ?? ThemeProvider? ??????? ???? ??? ????? ?????.</p>

<ol>
<li>
<strong>MUI? ??? ??? ????</strong>:</li>
</ol>

<p>MUI? ??? ????? ?? ? ?? ??? ??? ???? ?????. ????? 12? ??? ????? ?????.</p>

<p>??? MUI? ??? ?? ??? ???? ??? ????.<br>
</p>

<pre class="brush:php;toolbar:false"> 'react'?? React? ?????.
   '@mui/material'?? { ???, ?? }? ?????.

   ?? ?() {
     ?? (
       <div>

• ??? ????? ??? ??? ??? ??? ???? ? ?????.
• ??? ?? xs={12} md={6}? ??? ??? ?? ??(?? ??)?? 12?? ???? ??? ??(?? ??)?? 6?? ???? ?????.

??

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

??? ????? ??? ???? ?? ????? ????? ??? ??? ???? ? ? ??? ? ????. ?? ???? ?? ??? ??? React ??????? ???? ?? ??? ?????.

? ??? React?? Material-UI(MUI) ????: ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!