如何根据props修改Material UI组件属性（MUI 5.10.9版本）

你的代码里{...{error && {error:true,helperText:error}}}这行的问题在于，你把条件生成的属性对象又嵌套进了另一个对象中，当error有值时，实际会生成一个键为对象的无效结构，导致无法正确传递error和helperText属性。

针对MUI 5.10.9版本，有两种简洁的解决方式：

方式一：直接传递条件化属性 #

这种方式最直观，利用MUI TextField的特性——当helperText为null时会自动隐藏，无需额外判断：

import React from 'react'
import { TextField } from '@mui/material'

const InputField = (props) => {
  const { name, label, value, error = null, onChange } = props;

  return (
    <TextField
      variant='outlined'
      label={label}
      name={name}
      value={value}
      onChange={onChange}
      error={!!error} // 将error转为布尔值，有内容时为true
      helperText={error} // 有值时显示错误文本，null时自动隐藏
    />
  )
}

export default InputField 

方式二：提前定义条件属性对象 #

如果不想在error为null时传递helperText属性，可以先创建一个条件对象再展开：

import React from 'react'
import { TextField } from '@mui/material'

const InputField = (props) => {
  const { name, label, value, error = null, onChange } = props;
  // 仅当error存在时生成对应的属性
  const errorProps = error ? { error: true, helperText: error } : {};

  return (
    <TextField
      variant='outlined'
      label={label}
      name={name}
      value={value}
      onChange={onChange}
      {...errorProps} // 展开条件属性
    />
  )
}

export default InputField 

两种方式都能实现需求，方式一更简洁，推荐使用。

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