When a lit component extends a mixin, style in component overrides style in mixin.
Example:
my-component.js
export class HomePage extends ViewMixin(LitElement) {
static styles = css`
:host {
color: blue;
}
`;
view-mixin.js
export const ViewMixin = superClass => {
class ViewMixinElement extends superClass {
static styles = css`
:host {
background-color: red;
}
`;
The component will render with color=blue but background will not be red. How can I add background-color=red to all views while adding specific :host styling per view ?
If I got your question correctly, you need to extend styles in you child component. There is a way to do it like this:
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;
}`
];
}
I also added buttonStyles to make it clear how you could pass several styles in an array. Or have you styles in a separate file while extending the BaseButton.