Material-UI组件中componentsProps属性的具体用法是什么？

核心作用 #

MUI 中的复杂组件都是由多个内置的原子子组件组合封装而成的，componentsProps 是官方提供的属性透传入口，你可以通过这个属性直接给组件内部的指定子组件传递自定义属性、事件、样式配置，不需要重写整个内部子组件结构，也不需要嵌套写样式覆盖。

使用时机 #

你可以在以下场景优先使用 componentsProps：

• 需要修改复杂组件内部某个子组件的原生DOM属性、绑定自定义事件
• 仅需要调整内部子组件的样式、默认配置，不想改动组件原有的结构逻辑
• 不想通过嵌套选择器、全局样式覆盖的方式修改内部子组件样式，希望配置更直观可维护

具体使用方法 #

通用语法 #

<对应MUI复杂组件
  componentsProps={{
    内部子组件名: {
      属性1: 配置值,
      属性2: 配置值,
      // 所有对应子组件支持的属性都可以直接传
    }
  }}
/>

注意：不同组件支持传入的内部子组件名不同，可直接参考对应组件API文档中componentsProps字段的说明，子组件名拼写错误会导致配置不生效

基础示例 #

示例1：AutoComplete 组件透传输入框属性

给AutoComplete内部的输入框设置占位符，绑定聚焦事件：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

function Demo() {
  return (
    <Autocomplete
      options={['苹果', '香蕉', '橙子']}
      renderInput={(params) => <TextField {...params} label="选择水果" />}
      componentsProps={{
        input: {
          placeholder: '输入关键词搜索水果',
          onFocus: () => console.log('输入框已聚焦')
        }
      }}
    />
  )
}

示例2：StepLabel 组件修改标签和图标属性

给StepLabel的文字设置红色加粗样式，给步骤图标加hover提示：

import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';

function Demo() {
  return (
    <Step>
      <StepLabel
        componentsProps={{
          label: {
            sx: { color: '#f44336', fontWeight: 700 }
          },
          icon: {
            title: '该步骤为必填项'
          }
        }}
      >
        填写基础信息
      </StepLabel>
    </Step>
  )
}

示例3：BackDrop 组件修改过渡动画时长

调整BackDrop的淡入淡出过渡时长为1秒：

import { useState } from 'react';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>打开加载遮罩</Button>
      <Backdrop
        open={open}
        onClick={() => setOpen(false)}
        componentsProps={{
          transition: {
            timeout: 1000
          }
        }}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </>
  )
}

内容的提问来源于stack exchange，提问作者Muhammad Mehdi