Is a css reset kind of behaviour possible?

[axelderoeck]

I was wondering since the components have a default style applied to them if it is possible to have a css reset sort of like option?

This way we can apply styles to a component starting from nothing.

My current solution is a css reset object:

export const CSS_RESET = {
  "background-color": "white", // Preferably default transparent background but I don't know if its possible in lvgljs.
  "height": "auto",
  "width": "auto",
  "border-width": 0, 
  "border-radius": 0,
  "padding": 0,
  "padding-left": 0,
  "padding-right": 0,
  "padding-top": 0,
  "padding-bottom": 0,
  "shadow-width": 0,
  "shadow-offset-x": 0,
  "shadow-offset-y": 0,
  "outline-width": 0,
  "outline-padding": 0,
  "column-spacing": 0,
  "row-spacing": 0
}

And then add the object to every style:

<View
  style={{
    ...CSS_RESET,
    "height": "300px",
    ...
  }}
>
...
</View>

It would be nice to avoid having to re-use this object everywhere.

[kisvegabor]

You can call lv_obj_remove_style_all() to remove all the styles from a widget.

[axelderoeck]

I can't seem to find this function in the lv_binding_js project. How and where would I use this?

[kisvegabor]

I can comment only on the C LVGL. :slightly_frowning_face: cc @derekstavis

[derekstavis]

There's no CSS in this binding, just style objects, so in that sense, a selector (cascading) reset is not possible. The best way to achieve this is to wrap this binding's component in your own components that apply the reset object as you shared.