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.

El estilo :host del componente en Lit sobrescribe el estilo :host del mixin.

10 Jun, 2023 Programación

Cuando un componente Lit extiende un mixin, el estilo en el componente reemplaza al estilo en el mixin.

Ejemplo:

my-component.js

export class HomePage extiende ViewMixin(LitElement) {
static styles = css:host {
color: blue;
};
}

view-mixin.js

export const ViewMixin = superClass => {
clase ViewMixinElemento extiende superClass {
static styles = css:host {
background-color: rojo;
};

El componente se renderizará con color azul pero el fondo no será rojo.
¿Cómo puedo agregar background-color=red a todas las vistas mientras agrego un estilo host específico por vista?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una solución puede ser mover la propiedad background-color al selector :host en los estilos del componente, y luego incluir también los estilos del mixin. De esta manera, la propiedad background-color se aplicará a todas las vistas, mientras que el estilo específico :host para el componente también se aplicará.

    Ejemplo actualizado:

    my-component.js

    import { ViewMixin } from './view-mixin.js';

export class HomePage extends ViewMixin(LitElement) {
  static styles = [
    css`
      :host {
        background-color: red;
        color: blue;
      }
    `,
    ViewMixin.styles
  ];
};

    view-mixin.js

    export const ViewMixin = superClass => {
  class ViewMixinElement extends superClass {
    static styles = css`
      /* cualquier estilo para el mixin aquí */
    `;
  }
  return ViewMixinElement;
};

    Con este código actualizado, la propiedad background-color de los estilos del componente se aplicará a todas las vistas, mientras que el estilo color solo se aplicará a la vista específica donde se use el componente. Los estilos del mixin también se incluirán en los estilos del componente, lo que permitirá compartir cualquier estilo adicional en varios componentes que usen el mixin.

Comments are closed.