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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo se agrega una clase personalizada dentro de una clase personalizada en Material UI?

¿Cómo se agrega una clase personalizada dentro de una clase personalizada en Material UI?

14 Jul, 2023 Programación

Añadí la clase dentro de la clase como se muestra a continuación,

    import { withStyles } from "@material-ui/core/styles";
    import React from 'react';

    const styles = theme => ({
        test1:{
        '& test2':{
            color:"red"
        }
        },
        test2:{
           color:"blue"
        }
        })
    class Test extends React.Component {

    render() {
     const { classes } = this.props;
    return (
       <div>

        <div className={classes.test1}>
           <p className={classes.test2}> 
             child test2         //aquí ninguna propiedad css está funcionando
           </p>
        </div>

        <div className={classes.test2}>
        parent test 2          //aquí el color cambia a azul
        </div>

      </div>
)
  }
}

export default withStyles(styles, { withTheme: true })(Test);

Aquí, la propiedad de la clase test2 (color:”red”) no funciona en ningún lugar. Necesito aplicar una propiedad (color:”red”) solo cuando se llama dentro de la clase padre test1. ¿Por qué? Porque tengo el mismo className (test2) con diferentes propiedades. ¿Alguna idea de qué hacer en Material UI?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que estás intentando anidar reglas CSS utilizando el símbolo “&”, pero la API withStyles de Material-UI no admite este tipo de anidamiento. Una solución sería crear una nueva clase específicamente para la regla anidada y luego aplicarla al elemento secundario adecuado de la siguiente manera:

    const styles = theme => ({
   test1: {
     color: "red"
   },
   nested: {
     color: "red"
   }
})

class Test extends React.Component {
   render() {
     const { classes } = this.props;
     return (
       <div>
         <div classname="{classes.test1}">
           <p classname="{`${classes.nested}" ${classes.test2}`}="">
             child test2
           </p>
         </div>
         <div classname="{classes.test2}">
           parent test 2
         </div>
       </div>
     )
   }
}

    En este ejemplo, creamos una nueva clase de CSS llamada nested que tiene la misma propiedad color: red que test1. Luego aplicamos tanto nested como test2 como clases al elemento p secundario. De esta manera, la propiedad color: red solo se aplicará cuando el elemento p sea un hijo de un elemento con la clase test1.

    ¡Espero que esto ayude!

Comments are closed.