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

Question

React 和 Material UI 的新手 我不知道如何正确地动态传递颜色我从 JSON 文件中提取，但在我的搜索、StackOverflow 或文档中找不到很好的引用。

研究

• Material-ui hoverColor for MenuItem component?
• How can I access a hover state in reactjs?
• How do I change Material-UI MenuItem background on hover change from AutoComplete props?
• Material UI inline styling - specific component colours

尝试

给定 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>
      )
    })
  }

Material UI 样式:

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

但是我抛出了一个错误。我如何将颜色值动态传递给 useStyles 或我是否需要将其与 ?

Answer 1

您必须创建一个自定义的 makeStyle 将 prop 传递给每个键，如下所示:

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

我会留下一个sandbox link用我测试的和 link到文档。还有什么我能做的，请告诉我。