如何在Material UI (MUI) styles中编写JS条件逻辑替代行内样式

错误原因 #

你当前写法报错是因为makeStyles的回调函数作用域无法直接访问组件内部的Code、Description状态变量，需要通过参数传递的方式把状态传入样式定义。

方案1：makeStyles 传参实现（适配 MUI v4 / v5 兼容场景） #

• 定义useStyles时通过props接收传入的状态

const useStyles = makeStyles(theme => ({
  form: {
    // 从props中拿到状态做判断
    alignItems: props => (props.Code.length > 10 || props.Description.length > 100) ? 'start' : 'center',
    // 其他原有样式保留
  }
}))

• 组件内调用useStyles时传入需要的状态

// 组件内原有状态定义
const [Code, setCode] = useState('')
const [Description, setDescription] = useState('')

// 调用样式钩子时传入状态
const classes = useStyles({ Code, Description })

// 渲染时直接使用className即可，不需要额外写行内style
return <div className={classes.form}>...</div>

方案2：使用 MUI v5 推荐的 sx 属性（更简洁） #

如果是 MUI v5 版本，直接用内置的sx属性写条件逻辑更灵活，不需要修改makeStyles定义：

<div 
  className={classes.form}
  sx={{
    alignItems: (Code.length > 10 || Description.length > 100) ? 'start' : 'center'
  }}
>
...
</div>

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