Add custom CSS to a UI component

Problem

You want to customize the look-and-feel of a Dynaboard component beyond what the built-in controls offer.

Solution

Select the component you would like to edit
In the right editor sidebar, scroll to find the Style » Custom CSS panel
Enter your custom CSS in the text editor below, like for a Text component:

::component {
  /* Styles applied to the component itself. */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
 
::wrapper {
  /* Styles applied to the wrapper div around the component. */
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
  border-radius: 4px;
  padding: 8px;
}

Discussion

All components have both a ::component and ::wrapper pseudo-elements. Depending on how you style your components, you may need to use one or the other. Dynaboard uses the ::wrapper element to position your component, so you may prefer it for box-model related CSS properties.
You can use bindings in your Custom CSS to make it react to changes on the page or component. For example, you can bind the result of a Input named backgroundInput by doing:

::component {
  background: {{ backgroundInput.value }};
}

All CSS properties are supported with a number of common syntax extensions enabled by emotion (opens in a new tab). If you need something that is not yet supported, drop us a line.
CSS @keyframes (opens in a new tab) are supported. For example, you can apply the following Custom CSS to any component to make it animate by growing and shrinking every 4 seconds:

::component {
  animation: animate 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
 
@keyframes animate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

CSS @media queries (opens in a new tab) are supported when nested, like so:

::wrapper {
  width: 100%;
  
  @media (max-width: 800px) {
    width: 50%;
  }
}

Known Limitations

Some CSS features like top-level @media queries are not yet supported.

Add custom CSS to a UI component

Problem

Solution

Discussion

Known Limitations

See also