Sibling marker(Workaround for Classes for Stack element)

Usually, for styling on a detailed view you should be able to directly select components by their class names, i.e. if you have markup like,

<div class="my-class">...</div>

you can use CSS selector .my-class to select this div.

However, not all of our components have these class names, or they are not general enough. As a workaround, it's usually possible to use a Sibling selector

If you have markup like this (below):

<div class="marker" style="display:none" />
<div>...</div>

and you're interested in the second div, then you can't select it directly because it doesn't have a class name, but you can use a special selector .marker + div - it means "find an element with class 'marker', and select the next div next to this"

So the trick is to create a new synthetic marker component that will not be visible on the page but will have a specific class name that you can use for selectors.
Here's the code for adding the marker component:

tau.mashups
    .addDependency('react')
    .addDependency('tau/api/layout-renderer/v1/registerReactComponent')
    .addMashup(function(React, registerReactComponent) {
        registerReactComponent({
            type: 'cssMarker',
            component: function(props) {
                const className = props.config && props.config.className
                if (!className) {
                    return null;
                }
                return React.createElement('div', {style: {display: 'none'}, className});
            }
        })
    });

Like cssStyle, you only need to add it once. Once you have it installed, you can put it into any place of your detailed view and set a custom className on it
for example:

{
  "type": "cssMarker",
  "className": "test-class-name"
},
{
  "type": "collapsible",
  ...
}

When you add a marker like this, it allows you to use it for the next sibling selector to select an element right next to it - in this example, if you want to style this collapsible, you can use selector .test-class-name + div