当前位置：首页 > news >正文

Material-UI使用

news 2026/8/3 19:37:10

1、安装

npm install @mui/material @emotion/react @emotion/styled npm install @mui/x-data-grid

2、表格

使用DataGrid组件时，其模型中需要有属性id

有CheckBox时，使用onSelectionModelChange方法来监听选择的变化。返回的新选择模式是属性id

3、时间轴组件

需要安装@mui/lab

npm install @mui/lab

4、MUI System(v9.2)

4.1 styled方法

输入为tag, inputOptions = {}

tag
inputOptions

输出为函数muiStyledResolver，其输入为expressionsInput，返回值为Component

const 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; };