css 使用 prop 设置'&：hover'背景色

q8l4jmvw 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(209)

我正在 Package Material UI的Chip组件，以便可以为colors属性传入“primary”和“secondary”以外的值。我还想保持悬停效果，如果芯片是可点击的，使芯片过渡到一个不同的颜色时，光标在它上面。颜色是作为props传入的，所以设置backgroundColor和color很容易：

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

然而，由于我也想传递悬停颜色作为 prop ，我需要做这样的事情：

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

然而，&:hover（据我所知）不能在style prop 中使用。通常情况下，&:hover将在传入withStyles的样式对象内部使用，但我无法从那里访问props。有什么建议吗？

css

来源：https://stackoverflow.com/questions/55008320/using-props-to-set-hover-background-color

2条答案

按热度按时间

1qczuiv01#

您可以通过创建自己的自定义芯片组件来实现这一点。为了能够使用 prop 来控制样式，您可以使用makeStyles。makeStyles函数返回一个钩子，该钩子可以接受一个对象参数，以便为样式提供变量。
下面是一个可能的CustomChip实现：

import React from "react";
import Chip from "@material-ui/core/Chip";
import { makeStyles } from "@material-ui/core/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函数生成悬停和活动颜色）基于内部用于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演示：

下面是Material-UI v5版本的示例：

import Chip from "@material-ui/core/Chip";
import { styled } from "@material-ui/core/styles";
import { emphasize } from "@material-ui/core/styles";
import { shouldForwardProp } from "@material-ui/system";
function customShouldForwardProp(prop) {
  return (
    prop !== "color" &&
    prop !== "backgroundColor" &&
    prop !== "hoverBackgroundColor" &&
    shouldForwardProp(prop)
  );
}
const CustomChip = styled(Chip, { shouldForwardProp: customShouldForwardProp })(
  ({ color, backgroundColor, hoverBackgroundColor }) => ({
    color: color,
    backgroundColor: backgroundColor,
    "&:hover, &:focus": {
      backgroundColor: hoverBackgroundColor
        ? hoverBackgroundColor
        : emphasize(backgroundColor, 0.08)
    },
    "&:active": {
      backgroundColor: emphasize(
        hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
        0.12
      )
    }
  })
);

export default CustomChip;

赞(0）回复(0）举报 2023-06-07

niknxzdl2#

在Material UI v5中，您可以使用sx prop对:hover等伪类进行样式化：

<Chip
  label="Chip"
  onClick={() => {}}
  sx={{
    ':hover': {
      bgcolor: 'red',
    },
  }}
/>

如果你想创建一个可重用的样式化组件，另一个选择是styled()：

const options = {
  shouldForwardProp: (prop) => prop !== 'hoverBgColor',
};
const StyledChip = styled(
  Chip,
  options,
)(({ hoverBgColor }) => ({
  ':hover': {
    backgroundColor: hoverBgColor,
  },
}));

<StyledChip label="Chip" onClick={() => {}} hoverBgColor="red" />

赞(0）回复(0）举报 2023-06-07

我来回答

css 使用 prop 设置'&：hover'背景色

2条答案

相关问题

热门标签

最新问答