es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar el color del borde de la casilla de verificación de Material UI.

13 Jul, 2023 Programación

Aquí está mi casilla de verificación cuando está marcada:

Aquí está mi casilla de verificación cuando no está marcada:

Todos los mensajes relacionados con el estilo de la casilla de verificación se refieren al color de relleno, el color de la marca, etc. Debe haber algo obvio que me estoy perdiendo aquí, ¡solo trato de hacer el borde oscuro!

Mi código:

<Grid item xs={12}>
<FormControlLabel control={<Checkbox onChange={(event) => {
console.log(event.target.checked)
setValue('isParty', false)
}} />} label="Party" />
</Grid>

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para dar estilo al borde del componente Checkbox, puedes usar el atributo CSS border. Aquí tienes un ejemplo:

    const useStyles = makeStyles({
  checkbox: {
    border: '2px solid black'
  }
});

function MyCheckbox() {
  const classes = useStyles();

  return (
    <grid item="" xs="{12}">
      <formcontrollabel control=""></formcontrollabel><checkbox classname="{classes.checkbox}"></checkbox>}
        label="Party"
      />
    </grid>
  );
}

    En este ejemplo, definimos un gancho makeStyles para generar una clase CSS llamada checkbox, que establece el borde en 2px sólido negro. Luego, aplicamos la clase checkbox al componente Checkbox agregando className={classes.checkbox} a sus props.

Comments are closed.