0
531
ViewsEl componente de chip de MUI cambia el color de fondo cuando se selecciona
Estoy trabajando en reaccionar y usando el componente Chip de MUI. Me gustaría hacerlo para que cambie el color de fondo una vez que se seleccione en lugar del color predeterminado genérico.
He intentado usar los 'estilos globales', si desea cambiar el color de fondo cuando el usuario hace clic en el componente.
Por favor, vea a continuación lo que quiero decir:
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" />Traté de ver si el atributo hover en el objeto CSS hizo algo, pero no fue así.
2 answers
Answer question0
Este es un ejemplo de Codesandbox para cambiar el color de Chip y agregar color flotante. He agregado 2 elementos, uno con color y otro sin propiedad de color . https://codesandbox.io/s/chip-https-stackoverflow-com-questions-69652571-material-uis-chip-component-change-background-color-when-is-selected-cv8ud?file=/src /Aplicación.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; }Para leer más sobre Chip: https://mui.com/components/chips/
0
Puede cambiar los siguientes accesorios de Chip en función del estado seleccionado para controlar su visualización (consulte este ejemplo interactivo):
-
color: Cambia el color delChip. -
variant: cambia el color del borde o el color de fondo delChipusando el accesorio decolorde arriba. -
deleteIcon: muestra el icono del sufijo. -
onDelete: pasa una función vacía para mostrar el icono del sufijo, si está vacío, el icono está oculto.
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" />} /> ); 