Skip to content

Flex Component Styling#

mmx-customization#

Included in the Shadows Framework is the mmx-customizations CSS resource. This file is used to overwrite MMX Component styles to match the store’s theme. Within the resource custom fonts can be imported as well as the ability to overwrite CSS variables used within the flex components. The styling can be used to customize button colors, text size, font family, etc. Available CSS Variables can be found in the mmx-base CSS Resource.

The <mvt:item name="head" param="css:mmx-customizations" /> item is included in every MMX Flex Component. If the store is not using the Shadows framework an inline CSS resource can be added to the CSS Resources within Miva and the MMX components will inherit the styling.

MMX Examples#

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap");

:root {
    --mmx-font-family-1: "Poppins", sans-serif;
    --mmx-color-primary-bg: #aaaaaa;
}

mmx-image-across {
    --mmx-color-primary-bg: #cccccc;
}

Parts#

With web components, the Shadow DOM elements rendered by the web component can’t be targeted by CSS styles from the Light DOM (parent document). However, a web component can add part attributes to its Shadow DOM elements, allowing the Light DOM to style that element using the ::part() selector.

A pseudo example with MMX_Element looks like:

<style>
    mmx-example::part(text) {
        color: red;
    }
</style>

<mmx-example></mmx-example>

class MMX_Example extends MMX_Element {
    render() {
        return '<div part="text">Foo</div>';
    }
}

The “Foo” text would be colored red.

MMX Example#

mmx-button::part(button),
mmx-hero::part(button__inner),
mmx-product-carousel::part(button__inner),
mmx-featured-product::part(button__inner) {
    text-transform: uppercase;
}

This will change the button text to be uppercase.

mmx-image-and-text mmx-text[slot="heading"] {
    background: red;
}

mmx-image-and-text mmx-text[slot="heading"]::part(text) {
    color: white;
}

mmx-image-and-text mmx-text[slot="heading"]::part(text__inner) {
    border-bottom: 3px solid black;
    margin: 1rem;
}

This CSS will update the heading section within all the MMX Image and Text Flex Components.

Available MMX Parts#

By searching for part within the Flex Components Repository you will be able to find all the available part attributes for each MMX component.

Additionally, here is a CodePen created to illustrate the part attributes for the MMX-Hero component.

Further Reading#

Export Parts#

When a web component renders another web component in its Shadow DOM, the Shadow DOM’s web component parts cannot be styled by the Light DOM without exposing them through the [exportparts] attribute.

A pseudo example with MMX_Element could look like:

<style>
    mmx-parent::part(parent-text) {
        color: red;
    }
</style>

<mmx-parent></mmx-parent>

class MMX_Parent extends MMX_Element {
    render() {
        return '<mmx-text exportparts="text: parent-text"></mmx-text>';
    }
}

class MMX_Example extends MMX_Element {
    render() {
        return '<div part="text">Foo</div>';
    }
}

Further Reading#