突出显示材料用户界面中的选定项目？

Question

我有一个react项目，它在材料ui中使用动态创建的菜单，如下所示：

const createDays = (selectedDay, defaultStyles, selectedStyles) => {

  const days = [];
  for (let i = 0; i <= 7; i++) {
    const day = createDate(i);
    days.push(<MenuItem selected={day.dayOfTheWeek === selectedDay.dayOfTheWeek} classes={{ root: defaultStyles, selected: selectedStyles }} key={i} value={day}>{day.dayOfTheWeek}</MenuItem>);
  }
  return days;
};

此处引用此方法：

const DayPickerContainer = ({ day, onChange, classes }) => {
  const menuItemStyles = classes.menuItem;
  const select = classes.selected1;
  return (
    <FormControl>
      <FormHelperText className={classes.helperText}>Choose Day</FormHelperText>
      <Select value={day} onChange={onChange}>
        <MenuItem value={day}>{day.dayOfTheWeek}</MenuItem>
        {createDays(day, menuItemStyles, select)}
      </Select>
    </FormControl>

  );
};

这些是使用的样式：

const styles = () => ({
  helperText: {
    fontSize: '23px',
  },

  menuItem: {
    fontSize: '20px',
    backgroundColor: 'white !important',
  },

  selected: {
    backgroundColor: 'red !important',
  },

});

在菜单中选择一个项目时，我希望该项目与其他项目具有不同的背景色。但是，当选择其他项目时，此刻没有任何改变。