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.