0
535
VistasMUI's Chip Component change background color when selected
I'm working in react and using MUI's Chip component. I would like to make it so that it will change the background color once it is selected instead of the generic default color.
I have tried using the 'global styles', if you will to change the background color when user clicks on the component.
Please see below for what I mean:
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" />
I tried to see if the hover attribute in the CSS object did anything, but it didn't.
2 Respuestas
Responde la pregunta0
This is codesandbox example to change color for Chip and to add hover color. I have added 2 elements, one with color and one without color property.
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;
}
To read more on Chip - https://mui.com/components/chips/
0
You can change the Chip following props based on the selected state to control its display (See this interactive example):
color: Change the color of theChip.variant: Change the border color or background color of theChipusing thecolorprop above.deleteIcon: Display the suffix icon.onDelete: Pass an empty function to show the suffix icon, if it's empty, the icon is hidden.
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" />}
/>
);
