¿Cómo cambiar los estilos del elemento ListItem con el evento “onclick”?

Buscamos por internet y así traerte la respuesta para tu duda, si tienes alguna difcultad puedes dejarnos tu pregunta y contestaremos sin falta.

Solución:

Siempre que intente anular los estilos de Material-UI y no funcione como cabría esperar, el mejor recurso es el código fuente. Aquí está la URL para el ListItem código fuente: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ListItem/ListItem.js. En su mayor parte, solo necesita mirar el styles variable cerca de la parte superior del archivo fuente.

A continuación he copiado todas las partes de la styles variable que trata backgroundColor y textDecoration:

export const styles = theme => (
  /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
  root: 
    textDecoration: 'none',
    '&$selected, &$selected:hover, &$selected:focus': 
      backgroundColor: theme.palette.action.selected,
    ,
  ,
  /* Styles applied to the inner `component` element if `button=true`. */
  button: 
    transition: theme.transitions.create('background-color', 
      duration: theme.transitions.duration.shortest,
    ),
    '&:hover': 
      textDecoration: 'none',
      backgroundColor: theme.palette.action.hover,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': 
        backgroundColor: 'transparent',
      ,
    ,
    '&:focus': 
      backgroundColor: theme.palette.action.hover,
    ,
  ,
  /* Styles applied to the root element if `selected=true`. */
  selected: ,
);

Los principales estilos que causan dificultad son los button estilos de desplazamiento y enfoque. Para anularlos con éxito sin recurrir a “!importante”, debe tener la especificidad de CSS adecuada.

Lo siguiente parece hacer el truco:

  listItemDone: 
    borderRadius: "1em",
    "&,&:focus,&:hover": 
      backgroundColor: "#F6F6E8",
      textDecoration: "line-through"
    
  ,

Sin embargo, lo anterior evita que haya un efecto de desplazamiento sobre los elementos “terminados”, por lo que es posible que desee hacer algo más como:

  listItemDone: 
    borderRadius: "1em",
    "&,&:focus": 
      backgroundColor: "#F6F6E8",
      textDecoration: "line-through"
    ,
    "&:hover": 
      textDecoration: "line-through"
    
  ,

Esto permite que el color de fondo flotante de los elementos terminados siga siendo theme.palette.action.hover. Si desea que el color de desplazamiento sea diferente para los elementos terminados, puede especificarlo explícitamente junto con textDecoration.

Hay otro detalle que cuidar. Si hace clic en un elemento de la lista para ponerlo en estado “terminado” y luego vuelve a hacer clic en él, ya no estará en el estado “terminado”, pero tendrá el button estilos de enfoque aplicados. Para eliminar ese estilo de enfoque, también necesita lo siguiente:

  listItem: 
    borderRadius: "1em",
    "&,&:focus": 
      backgroundColor: theme.palette.background.paper // or whatever color you want this to be
    
  ,

Aquí está mi versión modificada de su caja de arena:

Así que he tratado de agregar !importante a este estilo y comenzó a funcionar como se esperaba:

  listItemDone: 
    borderRadius: "1em",
    backgroundColor: "#F6F6E8 !important",
    textDecoration: "line-through !important"
  ,

manifestación. Se parece a esto material-ui sólo anula tus estilos (textDecoration y backgroundColor) cuando pasas el cursor sobre elementos. Espero que ayude.

Si guardas alguna suspicacia o disposición de regenerar nuestro sección eres capaz de dejar un paráfrasis y con placer lo analizaremos.

---

---

Utiliza Nuestro Buscador