MUI 的芯片组件在选中时改变背景颜色答案

【问题标题】：MUI's Chip Component change background color when selectedMUI 的芯片组件在选中时改变背景颜色
【发布时间】：2021-12-07 15:55:20
【问题描述】：

我正在做 react 并使用 MUI 的 Chip 组件。我想让它在选择后更改背景颜色，而不是通用默认颜色。

我尝试过使用“全局样式”，如果您要在用户单击组件时更改背景颜色。

请看下面我的意思：

tokenChip: {
    height: '40px',
    width: '125px',
    fontSize: '18px',
    '&:hover': {
      backgroundColor: 'red'
    }

      <Chip
        className={ classes.tokenChip }
        clickable
classes={{ clickableColorPrimary: 'red', clickableColorSecondary:'blue'
        avatar={<Avatar
          style={{ padding: '2px' }}
          alt="Clickable"
          />}
        label="Clickable"
        variant="filled" />

我试图查看 CSS 对象中的 hover 属性是否有任何作用，但它没有。

【问题讨论】：

试试:active 属性。

标签： javascript css reactjs bootstrap-4 material-ui

【解决方案1】：

这是更改Chip 的颜色并添加悬停颜色的代码框示例。我添加了 2 个元素，一个带有 color 和一个没有 color 属性。 https://codesandbox.io/s/chip-https-stackoverflow-com-questions-69652571-material-uis-chip-component-change-background-color-when-it-is-selected-cv8ud?file=/src/App.js

import "./styles.css";
import {Chip} from '@material-ui/core';


export default function App({classes}) {

  const handleClick = () => {
    alert('You clicked the Chip.');
  };
  return (
    <div>
      <Chip
        className="tokenChip" 
        label="Clickable"
        onClick={handleClick}
      />  
      <Chip
        className="tokenChip2" 
        label="Clickable"
        color="primary"
        onClick={handleClick}
      /> 
    </div>
  );
}
.tokenChip {
  background-color: pink;
  width: 100px;
}
.MuiChip-clickable:hover {
    background-color: yellow;
}
.MuiChip-clickableColorPrimary:hover {
  background-color: black;
}

了解更多关于芯片的信息 - https://mui.com/components/chips/

【讨论】：

【解决方案2】：

你可以根据选中的状态改变Chip下面的props来控制它的显示（见这个互动example）：

color：更改Chip的颜色。
variant：使用上面的color 属性更改Chip 的边框颜色或背景颜色。
deleteIcon：显示后缀图标。
onDelete：传递一个空函数显示后缀图标，如果为空则隐藏图标。

const [selected, setSelected] = React.useState(false);

return (
  <Chip
    onClick={() => setSelected((s) => !s)}
    onDelete={selected && (() => {})}
    color={selected ? "primary" : "default"}
    variant={selected ? "default" : "outlined"}
    deleteIcon={<Done />}
    label="Choice"
    avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  />
);

【讨论】：