When adding Bindings in Quest, we provide various contextual options. These options may vary based on MUI component, image, node or text elements. With the "Dynamic Binding" option, you are free to use any binding you'd like.
This option is great for 2 things:
- 1.Adding a binding that you would like to use but you don't already see in the drop-down
- 2.Using this to add or override CSS styles on the presentation layer.
When you add a custom dynamic binding, Quest does a validation check to ensure it doesn't already exist to avoid duplicates. After adding the custom binding, you can add a value to go with the binding. The rest of the flow is the same as with the static binding. When generating the code, Quest checks if the binding is existing in a list of css properties, and if it does, we add it to the emotion style. Otherwise we pass it as an attribute to a react element.
You can also generate inline styles by using the "style" dynamic binding as below:
See below the list of honored CSS Properties: