Material-UI使用

1、安装npm install mui/material emotion/react emotion/styled npm install mui/x-data-grid2、表格使用DataGrid组件时其模型中需要有属性id有CheckBox时使用onSelectionModelChange方法来监听选择的变化。返回的新选择模式是属性id3、时间轴组件需要安装mui/labnpm install mui/lab4、MUI System(v9.2)4.1 styled方法输入为tag, inputOptions {}taginputOptions输出为函数muiStyledResolver其输入为expressionsInput返回值为Componentconst muiStyledResolver (...expressionsInput) { const expressionsHead []; const expressionsBody expressionsInput.map(transformStyle); const expressionsTail []; // Preprocess props to set the scoped theme value. // This must run before any other expression. expressionsHead.push(styleAttachTheme); if (componentName overridesResolver) { expressionsTail.push(function styleThemeOverrides(props) { const theme props.theme; const styleOverrides theme.components?.[componentName]?.styleOverrides; if (!styleOverrides) { return null; } const resolvedStyleOverrides {}; // TODO: v7 remove iteration and use resolveStyleArg(styleOverrides[slot]) directly // eslint-disable-next-line guard-for-in for (const slotKey in styleOverrides) { resolvedStyleOverrides[slotKey] processStyle( props, styleOverrides[slotKey], props.theme.modularCssLayers ? theme : undefined, ); } return overridesResolver(props, resolvedStyleOverrides); }); } if (componentName !skipVariantsResolver) { expressionsTail.push(function styleThemeVariants(props) { const theme props.theme; const themeVariants theme?.components?.[componentName]?.variants; if (!themeVariants) { return null; } return processStyleVariants( props, themeVariants, [], props.theme.modularCssLayers ? theme : undefined, ); }); } if (!skipSx) { expressionsTail.push(styleFunctionSx); } // This function can be called as a tagged template, so the first argument would contain // CSS string[] values. if (Array.isArray(expressionsBody[0])) { const inputStrings expressionsBody.shift(); // We need to add placeholders in the tagged template for the custom functions we have // possibly added (attachTheme, overrides, variants, and sx). const placeholdersHead new Array(expressionsHead.length).fill(); const placeholdersTail new Array(expressionsTail.length).fill(); let outputStrings; // prettier-ignore { outputStrings [...placeholdersHead, ...inputStrings, ...placeholdersTail]; outputStrings.raw [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail]; } // The only case where we put something before attachTheme expressionsHead.unshift(outputStrings); } const expressions [...expressionsHead, ...expressionsBody, ...expressionsTail]; const Component defaultStyledResolver(...expressions); if (tag.muiName) { Component.muiName tag.muiName; } if (process.env.NODE_ENV ! production) { Component.displayName generateDisplayName(componentName, componentSlot, tag); } return Component; };5、组件(v4)5.1 Card卡片集成内容和操作CardContentCardActions参考资料安装 - MUIGitHub - mui-org/material-ui at v5.1.0