Examples of `streamlit_flow.interfaces.StreamlitFlowNode`'s `style` configurations?

[SebastianScherer88]

Hi there, thanks for creating this library - it already looks amazing! ❤️ Since I have no front end experience at all, this library is an absolute goldmine for creating interactive flow diagrams via streamlit. ✨

I saw the option to style nodes using the style argument in the constructor. I was wondering if you could provide or point me to example stylisations of those nodes - or should I just dig into the react flow documentation? 🤔

[dkapur17]

Thanks @SebastianScherer88. I can throw in an example here. Say you want your node to have a green background and bold text, then you can pass the following dict to your style attribute:

{'backgroundColor': 'green', 'fontWeight': 900}

Now you must be wondering where exactly I'm getting these keywords, and how do I know what values these keywords support. You can find this answer in the CSS docs at MDN (https://developer.mozilla.org/en-US/docs/Web/CSS).

One thing I'd like to point out is that CSS uses kebab case syntax, so words within keywords are separated by hyphens. So for example, in CSS, the above style would look like this:

background-color: green;
font-weight: 900;

But the javascript engine that is running in the frontend expects camel cased keywords, like in the first example, so if you wish to use any css properties in the dictionary, make sure to make them camel case first.