{"id":3262,"date":"2024-12-26T22:59:48","date_gmt":"2024-12-26T15:59:48","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=3262"},"modified":"2024-12-26T23:27:52","modified_gmt":"2024-12-26T16:27:52","slug":"material-ui-la-gi","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/","title":{"rendered":"MUI (Material UI): C\u00f4ng c\u1ee5 r\u00fat ng\u1eafn th\u1eddi gian x\u00e2y d\u1ef1ng Giao di\u1ec7n"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3262\" class=\"elementor elementor-3262\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-530c381 e-flex e-con-boxed e-con e-parent\" data-id=\"530c381\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67fc8da elementor-widget elementor-widget-text-editor\" data-id=\"67fc8da\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>MUI (Material-UI) l\u00e0 th\u01b0 vi\u1ec7n giao di\u1ec7n ph\u1ed5 bi\u1ebfn gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng React v\u1edbi c\u00e1c components c\u00f3 s\u1eb5n nh\u01b0 Button, Table, Form, v\u00e0 Navigation m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i vi\u1ebft CSS t\u1eeb \u0111\u1ea7u. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m th\u1eddi gian v\u00e0 c\u00f4ng s\u1ee9c khi ph\u00e1t tri\u1ec3n giao di\u1ec7n. MUI h\u1ed7 tr\u1ee3 theme, cho ph\u00e9p d\u1ec5 d\u00e0ng thay \u0111\u1ed5i giao di\u1ec7n c\u1ee7a to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, t\u1eeb vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i gi\u1eefa ch\u1ebf \u0111\u1ed9 s\u00e1ng v\u00e0 t\u1ed1i, \u0111\u1ebfn vi\u1ec7c thay \u0111\u1ed5i m\u00e0u s\u1eafc, font ch\u1eef sao cho ph\u00f9 h\u1ee3p v\u1edbi th\u01b0\u01a1ng hi\u1ec7u c\u1ee7a b\u1ea1n. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1ea3i th\u00edch c\u00e1ch s\u1eed d\u1ee5ng MUI qua c\u00e1c v\u00ed d\u1ee5 d\u1ec5 hi\u1ec3u, gi\u00fap b\u1ea1n \u00e1p d\u1ee5ng th\u01b0 vi\u1ec7n n\u00e0y v\u00e0o d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh, d\u00f9 b\u1ea1n l\u00e0 ng\u01b0\u1eddi m\u1edbi hay \u0111\u00e3 c\u00f3 kinh nghi\u1ec7m v\u1edbi React.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a0e8bf elementor-widget elementor-widget-heading\" data-id=\"1a0e8bf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#1_MUI_Material_UI_la_gi\" >1. MUI (Material UI) l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#2_Tai_sao_nen_su_dung_MUI\" >2. T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng MUI?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#3_Su_dung_theme_trong_MUI\" >3. S\u1eed d\u1ee5ng theme trong MUI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#4_Su_dung_sx_prop_va_styled_de_custom_giao_dien\" >4. S\u1eed d\u1ee5ng sx prop v\u00e0 styled \u0111\u1ec3 custom giao di\u1ec7n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#5_Components_thuong_dung_trong_MUI\" >5. Components th\u01b0\u1eddng d\u00f9ng trong MUI<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#31_Typography\" >3.1 Typography<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#32_Button\" >3.2 Button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#33_Container_Box_va_Grid\" >3.3 Container, Box v\u00e0 Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#34_Card\" >3.4 Card<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#35_Dialog\" >3.5 Dialog<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#36_Icon\" >3.6 Icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#Vi_du_co_the_ket_hop_nhieu_thanh_phan_MUI_thanh_mot_page_don_gian\" >V\u00ed d\u1ee5 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u th\u00e0nh ph\u1ea7n MUI th\u00e0nh m\u1ed9t page \u0111\u01a1n gi\u1ea3n:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#6_Luu_y_khi_su_dung_MUI\" >6. L\u01b0u \u00fd khi s\u1eed d\u1ee5ng MUI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/fstack.io.vn\/blog\/material-ui-la-gi\/#7_Ket_luan\" >7. K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"1_MUI_Material_UI_la_gi\"><\/span>1. MUI (Material UI) l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37b0337 elementor-widget elementor-widget-text-editor\" data-id=\"37b0337\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Material UI\u00a0l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n UI m\u00e3 ngu\u1ed3n m\u1edf bao g\u1ed3m c\u00e1c React component, \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p th\u00eam c\u1ea3 Google&#8217;s Material Design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6bf7f25 elementor-widget elementor-widget-image\" data-id=\"6bf7f25\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"481\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1-1-1024x616.webp\" class=\"attachment-large size-large wp-image-3290\" alt=\"mui-la-gi(1)\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1-1-1024x616.webp 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1-1-300x181.webp 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1-1-768x462.webp 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1-1-1536x924.webp 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1-1.webp 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29d7933 elementor-widget elementor-widget-text-editor\" data-id=\"29d7933\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong MUI, c\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 c\u00f3 th\u1ec3 tu\u1ef3 bi\u1ebfn style:<\/p><ol><li>sx prop: nhanh, linh ho\u1ea1t, ph\u00f9 h\u1ee3p khi custom c\u1ee5c b\u1ed9 cho component.<\/li><li>styled(): t\u1ea1o ra component m\u1edbi c\u00f3 style ri\u00eang bi\u1ec7t, ph\u00f9 h\u1ee3p khi b\u1ea1n mu\u1ed1n t\u00e1i s\u1eed d\u1ee5ng n\u00f3 \u1edf nhi\u1ec1u n\u01a1i.<\/li><li>Theme overrides: \u00e1p d\u1ee5ng style to\u00e0n c\u1ee5c, thay \u0111\u1ed5i m\u1eb7c \u0111\u1ecbnh cho t\u1ea5t c\u1ea3 component.<\/li><\/ol><p>M\u1ed7i c\u00e1ch \u0111\u1ec1u c\u00f3 \u01b0u \u0111i\u1ec3m ri\u00eang, tu\u1ef3 thu\u1ed9c v\u00e0o tr\u01b0\u1eddng h\u1ee3p b\u1ea1n s\u1eed d\u1ee5ng:<\/p><ul><li>sx prop: d\u00f9ng khi b\u1ea1n mu\u1ed1n \u0111i\u1ec1u ch\u1ec9nh component ngay l\u1eadp t\u1ee9c, v\u00ed d\u1ee5 th\u00eam margin, padding nh\u1ecf.<\/li><li>styled(): khi b\u1ea1n c\u1ea7n t\u00e1ch logic style ra ri\u00eang, mu\u1ed1n t\u00e1i s\u1eed d\u1ee5ng ho\u1eb7c c\u1ea7n m\u1ed9t component \u0111\u01b0\u1ee3c &#8220;c\u00e1 nh\u00e2n ho\u00e1&#8221; t\u1eeb component g\u1ed1c.<\/li><li>Theme overrides: khi b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i style m\u1eb7c \u0111\u1ecbnh \u1edf t\u1ea7m r\u1ed9ng h\u01a1n, v\u00ed d\u1ee5 \u0111\u1ed5i m\u00e0u n\u1ec1n m\u1eb7c \u0111\u1ecbnh cho t\u1ea5t c\u1ea3 c\u00e1c Button primary.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b08ef3a elementor-widget elementor-widget-heading\" data-id=\"b08ef3a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"2_Tai_sao_nen_su_dung_MUI\"><\/span>2. T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng MUI?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf7f8b7 elementor-widget elementor-widget-text-editor\" data-id=\"cf7f8b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Ti\u1ebft ki\u1ec7m th\u1eddi gian: b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ef1 x\u00e2y d\u1ef1ng nh\u1eefng component giao di\u1ec7n c\u01a1 b\u1ea3n t\u1eeb \u0111\u1ea7u. Th\u01b0 vi\u1ec7n MUI \u0111\u00e3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3 cho b\u1ea1n, gi\u00fap b\u1ea1n ch\u1ec9 c\u1ea7n t\u1eadp trung v\u00e0o nghi\u1ec7p v\u1ee5, logic \u1ee9ng d\u1ee5ng.<\/li><li>Giao di\u1ec7n \u0111\u01b0\u1ee3c th\u1ed1ng nh\u1ea5t: s\u1eed d\u1ee5ng MUI gi\u00fap giao di\u1ec7n c\u1ee7a b\u1ea1n tu\u00e2n th\u1ee7 theo phong c\u00e1ch \u0111\u1ed3ng nh\u1ea5t, kh\u00f4ng b\u1ecb l\u1ec7ch design gi\u1eefa c\u00e1c trang trong \u1ee9ng d\u1ee5ng.<\/li><li>D\u1ec5 t\u00f9y bi\u1ebfn: ch\u1ec9 c\u1ea7n ch\u1ec9nh l\u1ea1i m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc ch\u1eef, hay mu\u1ed1n giao di\u1ec7n t\u1ed1i (dark mode). MUI c\u0169ng s\u1ebd h\u1ed7 tr\u1ee3 to\u00e0n di\u1ec7n theme.<\/li><li>C\u1ed9ng \u0111\u1ed3ng l\u1edbn, t\u00e0i li\u1ec7u chi ti\u1ebft: c\u00f3 r\u1ea5t nhi\u1ec1u v\u00ed d\u1ee5, h\u01b0\u1edbng d\u1eabn, v\u00e0 c\u00e2u tr\u1ea3 l\u1eddi s\u1eb5n c\u00f3, gi\u00fap b\u1ea1n nhanh ch\u00f3ng kh\u1eafc ph\u1ee5c nh\u1eefng kh\u00f3 kh\u0103n trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d08a8ce elementor-widget elementor-widget-heading\" data-id=\"d08a8ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"3_Su_dung_theme_trong_MUI\"><\/span>3. S\u1eed d\u1ee5ng theme trong MUI<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5cd04b4 elementor-widget elementor-widget-text-editor\" data-id=\"5cd04b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>\u0110\u1ea7u ti\u00ean, b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng MUI h\u00e3y ch\u1ea1y c\u00e2u l\u1ec7nh n\u00e0y \u0111\u1ec3 c\u00e0i \u0111\u1eb7t tr\u01b0\u1edbc \u0111\u00e3 nh\u00e9<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ce6475 elementor-widget elementor-widget-code-highlight\" data-id=\"8ce6475\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-bash line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-bash\">\n\t\t\t\t\t<xmp>pnpm install @mui\/material @emotion\/react @emotion\/styled<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c720003 elementor-widget elementor-widget-text-editor\" data-id=\"c720003\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>MUI cung c\u1ea5p h\u00e0m\u00a0<code>createTheme()<\/code>\u00a0\u0111\u1ec3 t\u1ea1o ra m\u1ed9t theme. Sau \u0111\u00f3 b\u1ea1n d\u00f9ng\u00a0<code>ThemeProvider<\/code>\u00a0\u0111\u1ec3 cung c\u1ea5p theme cho to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61879c2 elementor-widget elementor-widget-code-highlight\" data-id=\"61879c2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from '.\/App';\r\nimport { createTheme, ThemeProvider } from '@mui\/material\/styles';\r\n\r\n\/\/ ---------------------------------------------------------------\r\n\r\nconst theme = createTheme({\r\n  palette: {\r\n    primary: {\r\n      main: '#3f51b5',\r\n    },\r\n    secondary: {\r\n      main: '#f50057',\r\n    },\r\n  },\r\n  typography: {\r\n    fontFamily: '\"Roboto\",\"Helvetica\",\"Arial\",sans-serif',\r\n  },\r\n});\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <ThemeProvider theme={theme}>\r\n      <App \/>\r\n    <\/ThemeProvider>\r\n  <\/React.StrictMode>,\r\n  document.getElementById('root')\r\n);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c0ea80 elementor-widget elementor-widget-text-editor\" data-id=\"2c0ea80\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u1ede \u0111\u00e2y, m\u00ecnh t\u1ea1o m\u1ed9t theme v\u1edbi palette v\u00e0 typography.\u00a0<code>ThemeProvider<\/code>\u00a0b\u1ecdc\u00a0<code>App<\/code>\u00a0\u0111\u1ec3 to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng nh\u1eadn \u0111\u01b0\u1ee3c theme n\u00e0y. T\u1eeb gi\u1edd tr\u1edf \u0111i, khi b\u1ea1n s\u1eed d\u1ee5ng\u00a0<code>color=\"primary\"<\/code>\u00a0\u1edf b\u1ea5t k\u1ef3 component n\u00e0o (v\u00ed d\u1ee5 Button), n\u00f3 s\u1ebd l\u1ea5y m\u00e0u t\u1eeb\u00a0<code>theme.palette.primary.main<\/code>.<\/p><p>B\u1ea1n c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng theme h\u01a1n n\u1eefa nh\u01b0 thay \u0111\u1ed5i breakpoints, spacing, shape, zIndex, transitions,\u2026<\/p><p>Dark Mode hi\u1ec7n \u0111ang r\u1ea5t ph\u1ed5 bi\u1ebfn. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u1ea1o theme dark b\u1eb1ng c\u00e1ch \u0111\u1eb7t\u00a0<code>mode: 'dark'<\/code>\u00a0trong\u00a0<code>createTheme<\/code>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b95781 elementor-widget elementor-widget-code-highlight\" data-id=\"9b95781\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>const darkTheme = createTheme({\r\n  palette: {\r\n    mode: 'dark',\r\n    primary: {\r\n      main: '#90caf9'\r\n    },\r\n    secondary: {\r\n      main: '#f48fb1'\r\n    }\r\n  }\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8a40cd elementor-widget elementor-widget-text-editor\" data-id=\"a8a40cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Sau \u0111\u00f3 s\u1eed d\u1ee5ng\u00a0<code>ThemeProvider<\/code>\u00a0\u0111\u1ec3 \u00e1p d\u1ee5ng darkTheme. B\u1ea1n th\u1eadm ch\u00ed c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i gi\u1eefa light\/dark mode b\u1eb1ng c\u00e1ch l\u01b0u tr\u1ea1ng th\u00e1i v\u00e0 ch\u1ecdn theme t\u01b0\u01a1ng \u1ee9ng.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5f0b9b elementor-widget elementor-widget-code-highlight\" data-id=\"b5f0b9b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { useState } from 'react';\r\nimport { ThemeProvider, createTheme } from '@mui\/material\/styles';\r\nimport { Button } from '@mui\/material';\r\n\r\n\/\/ -----------------------------------------------------------\r\n\r\nfunction DarkModeToggle() {\r\n  const [darkMode, setDarkMode] = useState(false);\r\n  \r\n  const theme = createTheme({\r\n    palette: {\r\n      mode: darkMode ? 'dark' : 'light'\r\n    }\r\n  });\r\n\r\n  return (\r\n    <ThemeProvider theme={theme}>\r\n      <Button onClick={() => setDarkMode(!darkMode)}>\r\n       K\u00eanh {darkMode ? 'Light' : 'Dark'} Mode\r\n      <\/Button>\r\n      <p>\u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n \u0111\u1ec3 check m\u00e0u n\u1ec1n.<\/p>\r\n    <\/ThemeProvider>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e54ec18 elementor-widget elementor-widget-heading\" data-id=\"e54ec18\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"4_Su_dung_sx_prop_va_styled_de_custom_giao_dien\"><\/span>4. S\u1eed d\u1ee5ng sx prop v\u00e0 styled \u0111\u1ec3 custom giao di\u1ec7n<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87cb7b3 elementor-widget elementor-widget-text-editor\" data-id=\"87cb7b3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ngo\u00e0i theme ra th\u00ec MUI v5 c\u00f2n cung c\u1ea5p sx prop, cho ph\u00e9p b\u1ea1n vi\u1ebft style ngay trong JSX. sx s\u1eed d\u1ee5ng c\u00f9ng ng\u00f4n ng\u1eef theme, gi\u00fap b\u1ea1n vi\u1ebft CSS d\u01b0\u1edbi d\u1ea1ng \u0111\u1ed1i t\u01b0\u1ee3ng JS, c\u00f3 th\u1ec3 t\u01b0\u01a1ng t\u00e1c v\u1edbi theme.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c85523 elementor-widget elementor-widget-code-highlight\" data-id=\"9c85523\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp><Button \r\n  variant=\"contained\" \r\n  sx={{ \r\n    backgroundColor: 'primary.main', \r\n    margin: 2,\r\n    '&:hover': {\r\n      backgroundColor: 'secondary.main',\r\n    }\r\n  }}\r\n>\r\n Sx Button\r\n<\/Button><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b7ec3e elementor-widget elementor-widget-text-editor\" data-id=\"8b7ec3e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u1ede \u0111\u00e2y, sx cho ph\u00e9p b\u1ea1n tham chi\u1ebfu tr\u1ef1c ti\u1ebfp \u0111\u1ebfn\u00a0<code>theme.palette.primary.main<\/code>. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CSS pseudo-classes (<code>&amp;:hover<\/code>) v\u00e0 c\u00e1c breakpoint c\u00f3 s\u1eb5n.<\/p><p>N\u1ebfu b\u1ea1n c\u1ea7n t\u00e1i s\u1eed d\u1ee5ng nhi\u1ec1u style, b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng styled() &#8211; m\u1ed9t h\u00e0m t\u1ea1o ra component v\u1edbi style tu\u1ef3 ch\u1ec9nh.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2079499 elementor-widget elementor-widget-code-highlight\" data-id=\"2079499\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { styled } from '@mui\/material\/styles';\r\nimport Button from '@mui\/material\/Button';\r\n\r\n\/\/ ---------------------------------------------\r\n\r\nconst MyButton = styled(Button)(({ theme }) => ({\r\n  backgroundColor: theme.palette.primary.main,\r\n  color: '#fff',\r\n  margin: theme.spacing(2),\r\n  '&:hover': {\r\n    backgroundColor: theme.palette.secondary.main,\r\n  },\r\n}));\r\n\r\nfunction App() {\r\n  return <MyButton>Styled Button<\/MyButton>;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86bbc55 elementor-widget elementor-widget-text-editor\" data-id=\"86bbc55\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y trong \u0111o\u1ea1n code tr\u00ean, MyButton l\u00e0 m\u1ed9t component m\u1edbi, s\u1eed d\u1ee5ng Button c\u1ee7a MUI l\u00e0m n\u1ec1n t\u1ea3ng, v\u00e0 \u00e1p d\u1ee5ng style custom.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6df4c1c elementor-widget elementor-widget-heading\" data-id=\"6df4c1c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"5_Components_thuong_dung_trong_MUI\"><\/span>5. Components th\u01b0\u1eddng d\u00f9ng trong MUI<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72f96c9 elementor-widget elementor-widget-image\" data-id=\"72f96c9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-components.webp\" class=\"attachment-large size-large wp-image-3294\" alt=\"mui-components\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-components.webp 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-components-300x150.webp 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-components-768x384.webp 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc44073 elementor-widget elementor-widget-text-editor\" data-id=\"fc44073\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"31-typography\"><span class=\"ez-toc-section\" id=\"31_Typography\"><\/span>3.1 Typography<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Typography d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n v\u1edbi c\u00e1c bi\u1ebfn th\u1ec3 (variant) nh\u01b0: h1, h2, h3, body1, body2,&#8230;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-546b5bf elementor-widget elementor-widget-code-highlight\" data-id=\"546b5bf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import Typography from '@mui\/material\/Typography';\r\n\r\n\/\/ -------------------------------------------------\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <Typography variant=\"h1\" component=\"h2\" gutterBottom>\r\n        Ti\u00eau \u0111\u1ec1 ch\u00ednh\r\n      <\/Typography>\r\n      <Typography variant=\"body1\">\r\n        \u0110\u00e2y l\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n v\u00ed d\u1ee5. B\u1ea1n c\u00f3 th\u1ec3 tu\u1ef3 ch\u1ec9nh font-size, m\u00e0u,...\r\n      <\/Typography>\r\n    <\/div>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d837a4e elementor-widget elementor-widget-text-editor\" data-id=\"d837a4e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"32-button\"><span class=\"ez-toc-section\" id=\"32_Button\"><\/span>3.2 Button<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Button c\u00f3 nhi\u1ec1u bi\u1ebfn th\u1ec3: text, outlined, contained v\u00e0 nhi\u1ec1u thu\u1ed9c t\u00ednh kh\u00e1c.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ff1f9b elementor-widget elementor-widget-code-highlight\" data-id=\"7ff1f9b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp><Button variant=\"contained\" color=\"primary\">\r\n  Button\r\n<\/Button>\r\n<Button variant=\"outlined\" color=\"secondary\">\r\n  Button2\r\n<\/Button>\r\n<Button variant=\"text\" disabled>\r\n  Disabled Button\r\n<\/Button><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5d8fb0 elementor-widget elementor-widget-text-editor\" data-id=\"d5d8fb0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"33-container-box-v%C3%A0-grid\"><span class=\"ez-toc-section\" id=\"33_Container_Box_va_Grid\"><\/span>3.3 Container, Box v\u00e0 Grid<span class=\"ez-toc-section-end\"><\/span><\/h3><ul><li>Container d\u00f9ng \u0111\u1ec3 b\u1ecdc n\u1ed9i dung, gi\u1eef to\u00e0n b\u1ed9 page trong c\u00f9ng m\u1ed9t chi\u1ec1u r\u1ed9ng x\u00e1c \u0111\u1ecbnh (th\u01b0\u1eddng responsive).<\/li><li>Box l\u00e0 m\u1ed9t component \u0111a n\u0103ng, b\u1ea1n c\u00f3 th\u1ec3 coi nh\u01b0 n\u00f3 l\u00e0 m\u1ed9t div n\u00e2ng cao, h\u1ed7 tr\u1ee3 sx prop.<\/li><li>Grid l\u00e0 h\u1ec7 th\u1ed1ng l\u01b0\u1edbi, gi\u00fap s\u1eafp x\u1ebfp layout responsive.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7473b9d elementor-widget elementor-widget-code-highlight\" data-id=\"7473b9d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { Container, Box, Grid, Paper } from '@mui\/material';\r\n\r\n\/\/ ---------------------------------------------------------\r\n\r\nfunction LayoutExample() {\r\n  return (\r\n    <Container maxWidth=\"md\">\r\n      <Box sx={{ my: 4 }}>\r\n        <Grid container spacing={2}>\r\n          <Grid item xs={12} sm={6}>\r\n            <Paper elevation={2} sx={{ p: 2 }}>\r\n              200Lab 1\r\n            <\/Paper>\r\n          <\/Grid>\r\n          <Grid item xs={12} sm={6}>\r\n            <Paper elevation={2} sx={{ p: 2 }}>\r\n              200Lab 2\r\n            <\/Paper>\r\n          <\/Grid>\r\n        <\/Grid>\r\n      <\/Box>\r\n    <\/Container>\r\n  );\r\n}\r\n\r\nexport default LayoutExample;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7de23a2 elementor-widget elementor-widget-text-editor\" data-id=\"7de23a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"34-card\"><span class=\"ez-toc-section\" id=\"34_Card\"><\/span>3.4 Card<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Card l\u00e0 component gi\u00fap b\u1ea1n tr\u00ecnh b\u00e0y n\u1ed9i dung trong d\u1ea1ng th\u1ebb. Th\u01b0\u1eddng \u0111i k\u00e8m CardContent, CardMedia, CardActions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e953868 elementor-widget elementor-widget-code-highlight\" data-id=\"e953868\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { Card, CardActions, CardContent, CardMedia, Button, Typography } from '@mui\/material';\r\n\r\n\/\/ ------------------------------------------------------\r\n\r\nfunction CardExample() {\r\n  return (\r\n    <Card sx={{ maxWidth: 345 }}>\r\n      <CardMedia\r\n        component=\"img\"\r\n        height=\"140\"\r\n        image=\"https:\/\/placekitten.com\/300\/200\"\r\n        alt=\"Cute Kitten\"\r\n      \/>\r\n      <CardContent>\r\n        <Typography gutterBottom variant=\"h5\" component=\"div\">\r\n          \u0110\u00e2y l\u00e0 title\r\n        <\/Typography>\r\n        <Typography variant=\"body2\" color=\"text.secondary\">\r\n          \u0110\u00e2y l\u00e0 m\u00f4 t\u1ea3 v\u1ec1 g\u00ec \u0111\u00f3\r\n        <\/Typography>\r\n      <\/CardContent>\r\n      <CardActions>\r\n        <Button size=\"small\">Details<\/Button>\r\n        <Button size=\"small\" color=\"secondary\">Share<\/Button>\r\n      <\/CardActions>\r\n    <\/Card>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-734cd6f elementor-widget elementor-widget-text-editor\" data-id=\"734cd6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"35-dialog\"><span class=\"ez-toc-section\" id=\"35_Dialog\"><\/span>3.5 Dialog<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Dialog gi\u00fap hi\u1ec3n th\u1ecb n\u1ed9i dung tr\u00ean m\u00e0n h\u00ecnh, th\u01b0\u1eddng d\u00f9ng cho x\u00e1c nh\u1eadn, th\u00f4ng b\u00e1o ho\u1eb7c cho form ng\u1eafn.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a728369 elementor-widget elementor-widget-code-highlight\" data-id=\"a728369\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { useState } from 'react';\r\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography } from '@mui\/material';\r\n\r\n\/\/ ---------------------------------------------------------\r\n\r\nfunction DialogExample() {\r\n  const [open, setOpen] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      <Button variant=\"outlined\" onClick={() => setOpen(true)}>\r\n        Open Dialog\r\n      <\/Button>\r\n      <Dialog open={open} onClose={() => setOpen(false)}>\r\n        <DialogTitle>Confirm<\/DialogTitle>\r\n        <DialogContent>\r\n          <Typography>B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n ti\u1ebfp t\u1ee5c?<\/Typography>\r\n        <\/DialogContent>\r\n        <DialogActions>\r\n          <Button onClick={() => setOpen(false)}>Cancel<\/Button>\r\n          <Button onClick={() => { setOpen(false); alert('\u0110\u00e3 x\u00e1c nh\u1eadn!'); }} color=\"primary\" variant=\"contained\">\r\n           Confirm\r\n          <\/Button>\r\n        <\/DialogActions>\r\n      <\/Dialog>\r\n    <\/>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d239893 elementor-widget elementor-widget-text-editor\" data-id=\"d239893\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"36-icon\"><span class=\"ez-toc-section\" id=\"36_Icon\"><\/span>3.6 Icon<span class=\"ez-toc-section-end\"><\/span><\/h3><p>MUI Icons cung c\u1ea5p h\u00e0ng ngh\u00ecn bi\u1ec3u t\u01b0\u1ee3ng Material Design. B\u1ea1n ch\u1ec9 c\u1ea7n import bi\u1ec3u t\u01b0\u1ee3ng v\u00e0 s\u1eed d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4c65a1 elementor-widget elementor-widget-code-highlight\" data-id=\"f4c65a1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { Home, Star } from '@mui\/icons-material';\r\n\r\n\/\/ -----------------------------------------------\r\n\r\nfunction IconExample() {\r\n  return (\r\n    <div>\r\n      <Home color=\"primary\" \/>\r\n      <Star color=\"secondary\" \/>\r\n    <\/div>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71e2ee0 elementor-widget elementor-widget-text-editor\" data-id=\"71e2ee0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"36-icon\"><span class=\"ez-toc-section\" id=\"Vi_du_co_the_ket_hop_nhieu_thanh_phan_MUI_thanh_mot_page_don_gian\"><\/span>V\u00ed d\u1ee5 c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p nhi\u1ec1u th\u00e0nh ph\u1ea7n MUI th\u00e0nh m\u1ed9t page \u0111\u01a1n gi\u1ea3n:<span class=\"ez-toc-section-end\"><\/span><\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b00ee30 elementor-widget elementor-widget-code-highlight\" data-id=\"b00ee30\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { useState } from 'react';\r\nimport { AppBar, Toolbar, Typography, IconButton, Drawer, List, ListItem, ListItemText, Box, Grid, Card, CardContent, Button } from '@mui\/material';\r\nimport MenuIcon from '@mui\/icons-material\/Menu';\r\n\r\n\/\/ -----------------------------------------------------\r\n\r\nfunction App() {\r\n  const [openDrawer, setOpenDrawer] = useState(false);\r\n\r\n  const toggleDrawer = () => {\r\n    setOpenDrawer(!openDrawer);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <AppBar position=\"static\">\r\n        <Toolbar>\r\n          <IconButton color=\"inherit\" edge=\"start\" onClick={toggleDrawer}>\r\n            <MenuIcon \/>\r\n          <\/IconButton>\r\n          <Typography variant=\"h6\" sx={{ flexGrow: 1 }}>\r\n            Trang ch\u1ee7\r\n          <\/Typography>\r\n          <Button color=\"inherit\">\u0110\u0103ng nh\u1eadp<\/Button>\r\n        <\/Toolbar>\r\n      <\/AppBar>\r\n      \r\n      <Drawer anchor=\"left\" open={openDrawer} onClose={toggleDrawer}>\r\n        <Box sx={{ width: 250 }} role=\"presentation\">\r\n          <List>\r\n            <ListItem button>\r\n              <ListItemText primary=\"Trang ch\u1ee7\" \/>\r\n            <\/ListItem>\r\n            <ListItem button>\r\n              <ListItemText primary=\"Gi\u1edbi thi\u1ec7u\" \/>\r\n            <\/ListItem>\r\n            <ListItem button>\r\n              <ListItemText primary=\"Li\u00ean h\u1ec7\" \/>\r\n            <\/ListItem>\r\n          <\/List>\r\n        <\/Box>\r\n      <\/Drawer>\r\n\r\n      <Box sx={{ p: 2 }}>\r\n        <Typography variant=\"h4\" gutterBottom>\r\n          Danh s\u00e1ch s\u1ea3n ph\u1ea9m\r\n        <\/Typography>\r\n        <Grid container spacing={2}>\r\n          {Array.from({ length: 4 }).map((_, index) => (\r\n            <Grid item xs={12} sm={6} md={3} key={index}>\r\n              <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>\r\n                <CardContent>\r\n                  <Typography variant=\"h5\" gutterBottom>\r\n                    S\u1ea3n ph\u1ea9m {index + 1}\r\n                  <\/Typography>\r\n                  <Typography variant=\"body2\" color=\"text.secondary\">\r\n                    M\u00f4 t\u1ea3 ng\u1eafn v\u1ec1 s\u1ea3n ph\u1ea9m n\u00e0y.\r\n                  <\/Typography>\r\n                <\/CardContent>\r\n                <Box sx={{ flexGrow: 1 }} \/>\r\n                <Box sx={{ p: 2 }}>\r\n                  <Button variant=\"contained\" color=\"primary\" fullWidth>\r\n                    Mua ngay\r\n                  <\/Button>\r\n                <\/Box>\r\n              <\/Card>\r\n            <\/Grid>\r\n          ))}\r\n        <\/Grid>\r\n      <\/Box>\r\n    <\/>\r\n  );\r\n}\r\n\r\nexport default App;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c5d2ce elementor-widget elementor-widget-heading\" data-id=\"5c5d2ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"6_Luu_y_khi_su_dung_MUI\"><\/span>6. L\u01b0u \u00fd khi s\u1eed d\u1ee5ng MUI<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95868df elementor-widget elementor-widget-text-editor\" data-id=\"95868df\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0110\u00e2y ch\u1ec9 l\u00e0 kinh nghi\u1ec7m c\u1ee7a c\u00e1 nh\u00e2n m\u00ecnh khi s\u1eed d\u1ee5ng MUI m\u1ed9t th\u1eddi gian, b\u1ea1n n\u00e0o th\u1ea5y kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi b\u1ea3n th\u00e2n th\u00ec c\u00f3 th\u1ec3 b\u1ecf qua nha:<\/p><ul><li>Tree-shaking: MUI h\u1ed7 tr\u1ee3 tree-shaking, b\u1ea1n n\u00ean import tr\u1ef1c ti\u1ebfp t\u1eeb\u00a0<code>@mui\/material\/Button<\/code>\u00a0thay v\u00ec\u00a0<code>@mui\/material<\/code>\u00a0\u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc bundle.<\/li><li>SSR (Server-Side Rendering): n\u1ebfu b\u1ea1n d\u00f9ng Next.js hay frameworks SSR, b\u1ea1n c\u1ea7n c\u1ea5u h\u00ecnh MUI \u0111\u00fang c\u00e1ch \u0111\u1ec3 tr\u00e1nh nh\u1ea5p nh\u00e1y n\u1ed9i dung (Flicker). T\u00e0i li\u1ec7u MUI c\u00f3 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 SSR.<\/li><li>Custom theme theo module: b\u1ea1n c\u00f3 th\u1ec3 chia nh\u1ecf v\u00e0 qu\u1ea3n l\u00fd theme trong nhi\u1ec1u file \u0111\u1ec3 d\u1ec5 b\u1ea3o tr\u00ec.<\/li><li>Migrate d\u1ea7n: n\u1ebfu d\u1ef1 \u00e1n l\u1edbn \u0111\u00e3 c\u00f3 CSS, b\u1ea1n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p MUI v\u00e0 CSS c\u0169, sau \u0111\u00f3 migrate d\u1ea7n sang CSS-in-JS.<\/li><li>MUI ch\u1ec9 l\u00e0 layer UI. Ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p t\u1ed1i v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n kh\u00e1c. B\u1ea1n v\u1eabn c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p v\u1edbi:<ul><li>React Router \u0111\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng.<\/li><li>React Query hay Redux \u0111\u1ec3 qu\u1ea3n l\u00fd state.<\/li><li>React Hook Form \u0111\u1ec3 t\u1ea1o form<\/li><\/ul><\/li><\/ul><p>\u0110\u00e2y l\u00e0 v\u00ed d\u1ee5 m\u00ecnh th\u01b0\u1eddng hay s\u1eed d\u1ee5ng nh\u1ea5t l\u00e0 k\u1ebft h\u1ee3p TextField v\u1edbi React Hook Form nh\u01b0 n\u00e0y:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-334e4af elementor-widget elementor-widget-code-highlight\" data-id=\"334e4af\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>import { useForm, Controller } from 'react-hook-form';\r\nimport { TextField, Button } from '@mui\/material';\r\n\r\n\/\/ ---------------------------------------------------\r\n\r\nfunction FormExample() {\r\n  const { control, handleSubmit } = useForm();\r\n  \r\n  const onSubmit = data => console.log(data);\r\n\r\n  return (\r\n    <form onSubmit={handleSubmit(onSubmit)}>\r\n      <Controller\r\n        name=\"email\"\r\n        control={control}\r\n        defaultValue=\"\"\r\n        render={({ field }) => <TextField {...field} label=\"Email\" variant=\"outlined\" \/>}\r\n      \/>\r\n      <Button type=\"submit\" variant=\"contained\">Send<\/Button>\r\n    <\/form>\r\n  );\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1c45fc elementor-widget elementor-widget-heading\" data-id=\"d1c45fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"7_Ket_luan\"><\/span>7. K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3944b6 elementor-widget elementor-widget-text-editor\" data-id=\"e3944b6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>MUI (Material UI) l\u00e0 m\u1ed9t gi\u1ea3i ph\u00e1p to\u00e0n di\u1ec7n cho vi\u1ec7c x\u00e2y d\u1ef1ng giao di\u1ec7n React nhanh, \u0111\u1eb9p v\u00e0 linh ho\u1ea1t. B\u1ed9 components phong ph\u00fa v\u00e0 kh\u1ea3 n\u0103ng t\u00f9y bi\u1ebfn linh ho\u1ea1t, MUI gi\u00fap c\u00e1c developer ti\u1ebft ki\u1ec7m th\u1eddi gian, t\u1ea1o ra s\u1ea3n ph\u1ea9m c\u00f3 UI th\u1ed1ng nh\u1ea5t.<\/p><p>B\u1eb1ng c\u00e1ch n\u1eafm v\u1eefng c\u00e1c kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n v\u1ec1 theming, s\u1eed d\u1ee5ng sx prop, styled, v\u00e0 c\u00e1c k\u1ef9 thu\u1eadt override theme, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u1ea1o ra giao di\u1ec7n ph\u00f9 h\u1ee3p v\u1edbi nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u, \u0111\u1ed3ng th\u1eddi \u0111\u1ea3m b\u1ea3o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb.<\/p><p>Hy v\u1ecdng b\u00e0i vi\u1ebft n\u00e0y gi\u00fap b\u1ea1n c\u00f3 c\u00e1i nh\u00ecn t\u1ed5ng quan v\u00e0 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 MUI, t\u1eeb c\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n \u0111\u1ebfn s\u1eed d\u1ee5ng n\u00e2ng cao.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MUI (Material-UI) l\u00e0 th\u01b0 vi\u1ec7n giao di\u1ec7n ph\u1ed5 bi\u1ebfn gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng React v\u1edbi c\u00e1c components c\u00f3 s\u1eb5n nh\u01b0 Button, Table, Form, v\u00e0 Navigation m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i vi\u1ebft CSS t\u1eeb \u0111\u1ea7u. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m th\u1eddi gian v\u00e0 c\u00f4ng s\u1ee9c khi ph\u00e1t tri\u1ec3n giao di\u1ec7n. MUI h\u1ed7 tr\u1ee3 theme, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":3266,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,43],"tags":[88,87],"class_list":["post-3262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe","category-react-cong-nghe","tag-material-ui","tag-mui"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/12\/mui-la-gi-1.webp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/3262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=3262"}],"version-history":[{"count":16,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/3262\/revisions"}],"predecessor-version":[{"id":3297,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/3262\/revisions\/3297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/3266"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=3262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=3262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=3262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}