makeStyles: неожиданный токен, ожидаемый ","

Question

Просмотр документов (https://material -ui.com / css-in-js / basics / ), это должно быть возможно:

const useStyles = makeStyles({
    h2: {
        font-family: '-apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif'
    }
});

Однако при попытке запустить, Я получаю:

  Line 119:  Parsing error: Unexpected token, expected ","

  117 | const useStyles = makeStyles({
  118 |     h2: {
> 119 |         font-family: '-apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif'                                                                     
      |             ^
  120 |     }
  121 | });
  122 | 

Я не совсем уверен, где я ошибся?

Answer 1

Ключ с тире должен быть в кавычках.Попробуйте это:

const useStyles = makeStyles({
    h2: {
        'font-family': '-apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif'                                                                     
    }
});

Answer 2

font-family не является допустимым идентификатором, его необходимо заключить в кавычки:

'font-family': ...