Cuando un componente iluminado extiende una mezcla, el estilo en el componente anula el estilo en la mezcla.
Ejemplo:
mi-componente.js
export class HomePage extends ViewMixin(LitElement) { static styles = css` :host { color: blue; } `;ver-mixin.js
export const ViewMixin = superClass => { class ViewMixinElement extends superClass { static styles = css` :host { background-color: red; } `;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 de host específico por vista?
Si respondí correctamente su pregunta, debe extender los estilos en su componente secundario. Hay una manera de hacerlo así:
import { css } from 'lit'; import { BaseButton } from './BaseButton.js'; import { buttonStyles } from './buttonStyles.js'; export class EnhancedButton extends BaseButton { static styles = [ BaseButton.styles, buttonStyles, css`div { background-color: red; }` ]; } También agregué buttonStyles para dejar en claro cómo se pueden pasar varios estilos en una matriz. O tenga sus estilos en un archivo separado mientras extiende el BaseButton .