Блог

Допустим, у меня есть очень простой props интерфейс, который определяет логическое свойство. Теперь, в моем useStyles случае , я хочу изменить способ отображения этого стиля на основе как условного свойства, так и точки останова. Вот очень простой пример:

 interface Props {
  isError: boolean;
}

const useStyles = makeStyles<Theme, Props>(theme => ({
  box: ({ isError}) => ({
    backgroundColor: isError? 'red' : 'green',

    [theme.breakpoints.up('md')]: {
      backgroundColor: isError ? 'maroon' : 'teal',
    }
  }),
}));
 

Когда я нахожусь под точкой md останова, это работает, как и ожидалось; но как только я перехожу точку md останова, цвет не меняется. Как так получилось?

Вот демонстрационная версия на StackBlitz, которая демонстрирует проблему.

Работая над примером для этого вопроса, я выяснил проблему. Значение свойства для создания стилей на основе точки останова также должно быть функцией:

 const useStyles = makeStyles<Theme, Props>(theme => ({
  box: (outerProps) => ({
    backgroundColor: outerProps.isError ? 'red' : 'green',

    [theme.breakpoints.up('md')]: (innerProps) => ({
      backgroundColor: innerProps.isError ? 'maroon' : 'aqua',
    }),
  })
}));
 

Вот обновленный StackBlitz, показывающий рабочий пример.