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

Question

React 和 Material UI 新手，我很困惑如何正确地动态传递我从 JSON 文件中提取的颜色，并且在我的搜索、StackOverflow 或文档中没有找到好的参考。

研究

• MenuItem 组件的 Material-ui悬停颜色？
• 如何在reactjs中访问悬停状态？
• 如何通过 AutoComplete 属性更改悬停更改时的 Material-UI MenuItem 背景？
• Material UI 内联样式 - 特定组件颜色

试图

给定 JSON 文件：

[
  {
    "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，将 prop 传递给每个键，如下所示：

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

我将留下一个沙盒链接，其中包含我测试的内容以及文档的链接。还有什么我能做的请告诉我。