How to set custom notation?

[xfishernet]

How to set custom notation on border? Example:

[willb335]

Sorry, but it doesn't have a prop to customize notation

[gempir]

Is it possible to style it atleast? It has no class, no style prop as far as I can see. Kinda hard to modify the look of them.

[gempir]

If this helps anyone this how styled them to be outside the field (based on view height since I resize by that)

div[data-testid=white-square], div[data-testid=black-square] {

    > div:first-child {
        user-select: none;

        > div:first-child:not([data-testid]), > div:last-child:not([data-testid]), div[data-testid=bottom-left-1] {
            font-size: 2.5rem !important;
            margin-left: -4vh !important;
            align-self: center !important;
            color: var(--text) !important;
        }

        div[data-testid=bottom-left-a], div[data-testid=column-b], div[data-testid=column-c], div[data-testid=column-d], div[data-testid=column-e], div[data-testid=column-f], div[data-testid=column-g], div[data-testid=column-h] {
            font-size: 2.5rem !important;
            color: var(--text) !important;
            margin-top: 7vh !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }
    }
}