theming joystick with "style" and "classes"

nicegui/elements/joystick.js

@@ -1,6 +1,6 @@
 Vue.component("joystick", {
   template: `
-  <div data-nicegui='joystick' v-bind:id="jp_props.id" style="background-color:AliceBlue;position:relative;width:10em;height:10em" :style="jp_props.style"></div>
+  <div data-nicegui='joystick' v-bind:id="jp_props.id" :class="jp_props.classes" style="background-color:AliceBlue;position:relative;width:10em;height:10em" :style="jp_props.style"></div>
     `,
   mounted() {
     const joystick = nipplejs.create({

tests/test_element.py

@@ -37,6 +37,15 @@ def test_joystick(screen: Screen):
     screen.should_contain('end 0, 0')
 
 
+def test_styling_joystick(screen: Screen):
+    ui.joystick().style('background-color: gray;').classes('shadow-lg')
+
+    screen.open('/')
+    joystick = screen.selenium.find_element(By.XPATH, '//div[@data-nicegui="joystick"]')
+    assert 'background-color: gray;' in joystick.get_attribute('style')
+    assert 'shadow-lg' in joystick.get_attribute('class')
+
+
 @pytest.mark.skip(reason='not jet fixed; see https://github.com/zauberzeug/nicegui/issues/98')
 def test_input_with_multi_word_error_message(screen: Screen):
     input = ui.input(label='some input')