将字体样式从对象映射到映射的正确语法()

Question

React、JS和Material UI

好吧，可能是个菜鸟问题，但我在map函数的style属性中到底做错了什么？

Fonts.jsx

export const fonts = [
  {
    fontName: 'Abril',
    key: 'abril',
    fontFamily: "'Abril Fatface', cursive;",
  },
  {
    fontName: 'Bangers',
    key: 'bangers',
    fontFamily: "'Bangers', cursive;",
  },
  {
    fontName: 'Bebas',
    key: 'bebas',
    fontFamily: "'Bebas Neue', cursive;",
  },
  {
    fontName: 'Bungee',
    key: 'bungee',
    fontFamily: "'Bungee', cursive;",
  },
  {
    fontName: 'Dancing',
    key: 'dancing',
    fontFamily: "'Dancing Script', cursive;",
  },
  {
    fontName: 'Fascinate',
    key: 'fascinate',
    fontFamily: "'Fascinate', cursive;",
  },
  {
    fontName: 'Frijole',
    key: 'frijole',
    fontFamily: "'Frijole', cursive;",
  },
  {
    fontName: 'Girassol',
    key: 'girassol',
    fontFamily: "'Girassol', cursive;",
  },
  {
    fontName: 'Goblin',
    key: 'goblin',
    fontFamily: "'Goblin One', cursive;",
  },
  {
    fontName: 'Graduate',
    key: 'graduate',
    fontFamily: "'Graduate', cursive;",
  },
  {
    fontName: 'Great Vibes',
    key: 'greatVibes',
    fontFamily: "'Great Vibes', cursive;",
  },
  {
    fontName: 'Shadows',
    key: 'shadows',
    fontFamily: "'Shadows Into Light', cursive;",
  },
  {
    fontName: 'Krona',
    key: 'Krona',
    fontFamily: "'Krona One', sans-serif;",
  },
  {
    fontName: 'Lobster',
    key: 'Lobster',
    fontFamily: "'Lobster', cursive;",
  },
  {
    fontName: 'Newsreader',
    key: 'newsreader',
    fontFamily: "'Newsreader', serif;",
  },
  {
    fontName: 'Permanent Marker',
    key: 'permanentMarker',
    fontFamily: "'Permanent Marker', cursive;",
  },
  {
    fontName: 'Righteous',
    key: 'righteous',
    fontFamily: "'Righteous', cursive;",
  },
  { fontName: 'Spartan', key: 'spartan', fontFamily: "'Spartan', sans-serif;" },
];

和我的map()函数：

<Select label="Font" onChange={handleFont} defaultValue="Abril" className={classes.selectEmpty} value={font}>                
  {fonts.map((el, i) => (
     <MenuItem key={el.key} value={el.fontName} style={{ fontFamily: el.fontFamily }}>
        {el.fontName}
     </MenuItem>))}
</Select>

我得到的错误是:警告:样式属性值不应该包含分号。试试"fontFamily：'Spartan'，sans-serif“。

我想我知道我需要做什么，但不知道怎么做。对一个已经在这上面花了太多时间的苦苦挣扎的菜鸟有什么帮助吗？

Answer 1

iz_在评论中帮助回答了我愚蠢的问题。谢谢你，伙计。

从我的对象中删除；确实起到了作用