Skip to content

Component Stylesheets

Every built-in component keeps its look in a stylesheet, <Name>_Stylesheet.yaml, beside its structure, <Name>_Component.yaml. Each page here shows one stylesheet, how it is tied to its component, and what it makes.

How they work

A stylesheet is a list of rules. Each names a part of the component by its id and gives that part's style:

styles:
  - id: root
    style: {background: primary, width: "{{ width }}"}
  - id: label
    style: {foreground: on_primary}
  • A value in {{ }} is one of the component's parameters, filled in where the component is used.
  • A value can be {if: "{{ selected }}", then: primary, else: on_surface}, chosen by a parameter.
  • A part's own style: in the fragment is kept, and wins over its stylesheet.
  • Your own <Name>_Stylesheet.yaml next to your views goes over the built-in one, field by field. A fragment of your own with the same name as a built-in one replaces it, and the built-in stylesheet with it.
  • Hot reload watches the stylesheets a view uses.

This is a different thing from a view's stylesheet (App(stylesheet=)), whose rules match many nodes by kind, classes or id: see Themes. A component's stylesheet styles one component's parts.

Actions

Communication

Containment

Selection and input

Content

Beyond MD3