在材质UI中，我如何动态地将颜色传递给我的样式？

Question

对于React和Material UI来说，我很难理解如何正确地动态传递我从JSON文件中提取的颜色，但我在搜索、StackOverflow或文档中没有找到一个很好的引用。

• MenuItem组件的材质-UI hoverColor？
• 如何访问ReactJS中的悬停状态？
• 如何从自动完成道具更改悬停时的材质-UI菜单项背景？
• 材质UI内联样式特定的组件颜色

给定JSON文件：

json prettyprint-override">[
  {
    "label": "Home",
    "href": "/",
    "colorHover": ""
  },
  {
    "label": "Monday",
    "href": "/mon",
    "colorHover": "#35c5bd"
  },
  {
    "label": "Tuesday",
    "href": "/tues",
    "colorHover": "#fa8b25"
  },
  {
    "label": "Wednesday",
    "href": "/wed",
    "colorHover": "#f26531"
  }
]

我将它放入组件中，并用以下方法循环遍历：

  const getDrawerChoices = () => {
    return headersData.map(({ label, href, colorHover }) => {
      const colorChange = colorHover === '' ? 'inherit' : colorHover

      return (
        <Link
          {...{
            component: RouterLink,
            to: href,
            color: 'inherit',
            style: { textDecoration: 'none' },
            key: label,
          }}
        >
          <MenuItem className={menuItem.hover(colorChange)}>{label}</MenuItem>
        </Link>
      )
    })
  }

物料UI样式：

const useStyles = makeStyles(colorChange => ({
  menuItem: {
    '&:hover': {
      backgroundColor: `${colorChange} !important`,
    },
  },
}))

但我犯了个错误。如何将颜色值动态传递给useStyles？

Answer 1

您必须创建一个自定义的Makestyle，将一个道具传递给每个键，如下所示：

const useStyles = makeStyles({
  root: (props) => ({
    "&:hover": {
      backgroundColor: props.hoverColor
    }
  })
});

我会留下一个沙盒链接，上面有我测试的内容和文档的链接。还有什么我能做的请告诉我。