Q: Can I completely replace the sylesheet? Trying to use bootstrap

[thondeboer]

I am trying to change the look and feel of my app to use bootstrap, but adding bootstrap CSS to the /static directory only allows me partial changing the style of the components.

THis is likely due to what you describe here: https://www.streamsync.cloud/stylesheets.html#tips-for-effective-stylesheets in that it is not using the important flag, but does that mean we are always going to have to make our own stylesheet and cannot use existing ones, like bootstrap for streamsync apps?

[ramedina86]

Yes, the expectation is for CSS classes to be created ad-hoc and used sparingly to alter small details. For example, apply rounded corners to Image.

I think your experience isn't going to be great if you apply Bootstrap to any prebuilt components. That applies to Streamsync and to any other framework that uses prebuilt components.

The only way for Bootstrap to reliably work is to create raw HTML elements that align with what Bootstrap expects. The main reason is that most of the time you'll be dealing not with raw HTML elements but with complex trees of HTML elements.

The issue you mentioned does complicate things, since style fields configurable by Builder use the style attribute of HTML elements, which has higher specificity, so things like background or color do get lost unless flagged with !important.

[ramedina86]

Hi, I'll be looking at ways to get around this limitation using Vue's SFC CSS binding

@FabienArcellier My idea is to replace the computed rootStyle and such to the v-bind in CSS, so as to have the styles have lower specificity thus not needing !important for overriding in custom stylesheets.