使用道具设置'&amp :: hover'背景颜色 [英] Using props to set '&:hover' background-color

问题描述

我包装了Material-UI的芯片组件，以便为colors道具传递"primary"和"secondary"以外的值.如果芯片是可单击的，我还希望保持悬停效果，以便当光标位于其上方时，芯片会转换为其他颜色.颜色作为道具传递，因此设置backgroundColor和color很容易:

I'm wrapping Material-UI's chip component so that I can pass in values other than "primary" and "secondary" for the colors prop. I also want to maintain the hover effect if the chip is clickable so that the chip transitions to a different color when the cursor is over it. The colors are passed in as props, so it's easy enough to set the backgroundColor and color:

<Chip
  style={{
    backgroundColor: props.backgroundColor,
    color: props.color
  }}
/> 

但是，由于我也想传递悬停颜色作为道具，因此我需要执行以下操作:

However, since I'd also like to pass in the hover color as a prop, I'd need to do something like this:

<Chip
  style={{
    backgroundColor: props.backgroundColor,
    color: props.color,
    '&:hover': {
      backgroundColor: props.hoverBackgroundColor,
      color: props.hoverColor
    }
  }}
/> 

但是，&:hover(据我所知)不能在style道具内部使用.通常，&:hover将在传递到withStyles的样式对象中使用，但我无法从那里访问道具.有什么建议吗?

However, the &:hover (as far as I know) can't be used inside of the style prop. Typically, the &:hover would be used inside of a styles object that is passed into withStyles, but I'm not able to access props from in there. Any suggestions?

推荐答案

您可以通过创建自己的自定义芯片组件来实现.为了能够使用道具来控制样式，可以使用"@ material-ui中的=" ="noreferrer"> makeStyles 函数/styles"包.该程序包仍被视为"alpha"，但旨在作为Material-UI v4的默认样式实现. makeStyles函数返回一个钩子，该钩子可以接受用于为样式提供变量的对象参数.

You can achieve this by creating your own custom chip component. In order to be able to use props to control the styling, you can use the makeStyles function from the "@material-ui/styles" package. This package is still considered "alpha", but is intended to be the default style implementation for v4 of Material-UI. The makeStyles function returns a hook that can accept an object parameter for providing variables to your styles.

这是一个可能的CustomChip实现:

Here's a possible CustomChip implementaton:

import React from "react";
import Chip from "@material-ui/core/Chip";
import { makeStyles } from "@material-ui/styles";
import { emphasize } from "@material-ui/core/styles/colorManipulator";

const useChipStyles = makeStyles({
  chip: {
    color: ({ color }) => color,
    backgroundColor: ({ backgroundColor }) => backgroundColor,
    "&:hover, &:focus": {
      backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
        hoverBackgroundColor
          ? hoverBackgroundColor
          : emphasize(backgroundColor, 0.08)
    },
    "&:active": {
      backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
        emphasize(
          hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
          0.12
        )
    }
  }
});
const CustomChip = ({
  color,
  backgroundColor,
  hoverBackgroundColor,
  ...rest
}) => {
  const classes = useChipStyles({
    color,
    backgroundColor,
    hoverBackgroundColor
  });
  return <Chip className={classes.chip} {...rest} />;
};
export default CustomChip;

样式方法(包括使用emphasize函数生成悬停和活动颜色)基于内部用于

The styling approach (including the use of the emphasize function to generate the hover and active colors) is based on the approach used internally for Chip.

然后可以这样使用:

      <CustomChip
        label="Custom Chip 1"
        color="green"
        backgroundColor="#ccf"
        onClick={() => {
          console.log("clicked 1");
        }}
      />
      <CustomChip
        label="Custom Chip 2"
        color="#f0f"
        backgroundColor="#fcc"
        hoverBackgroundColor="#afa"
        onClick={() => {
          console.log("clicked 2");
        }}
      />

这是一个CodeSandbox演示:

Here's a CodeSandbox demonstrating this:

这篇关于使用道具设置'&amp :: hover'背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！