MUI中sx属性使用三元运算符不生效问题咨询

问题原因 #

你的代码存在两处语法错误：

• 三元运算符结构缺失：标准三元运算语法为条件 ? 成立时返回值 : 不成立时返回值，你的代码没有写条件不成立时的返回分支
• 对象结构书写错误：sx属性接收JS对象作为入参，你混淆了对象键名和三元运算的位置，没有遵循键名: 键值的对象书写规则

修复方案 #

根据你的使用场景可以选两种写法：

场景1：需要自定义未选中状态的背景色 #

直接把bgcolor的键值设置为三元表达式即可：

sx={{
  ...calendarDayColor,
  bgcolor: isSameDay(new Date(props.date), new Date(selectedDay)) ? 'secondary.main' : '默认背景色值'
}}

场景2：保留calendarDayColor中已定义的默认背景色 #

用条件展开对象的写法，未选中时不覆盖原有样式：

sx={{
  ...calendarDayColor,
  ...(isSameDay(new Date(props.date), new Date(selectedDay)) ? { bgcolor: 'secondary.main' } : {})
}}

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