[英]MUI's Chip Component change background color when selected
我正在反應和使用 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 屬性是否有任何作用,但它沒有。
這是用於更改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/
您可以根據選定的狀態更改Chip
跟隨道具以控制其顯示(請參閱此交互式示例):
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" />}
/>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.