# Questions regarding style props and how they behave when they are nested

**URL:** <https://forum.inductiveautomation.com/t/questions-regarding-style-props-and-how-they-behave-when-they-are-nested/92195>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [June 21, 2024, 5:21am UTC](https://forum.inductiveautomation.com/t/questions-regarding-style-props-and-how-they-behave-when-they-are-nested/92195 "2024-06-21T05:21:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Phillip\_Wu](https://avatars.discourse-cdn.com/v4/letter/p/f4b2a3/32.png) [@Phillip\_Wu](https://forum.inductiveautomation.com/u/Phillip_Wu)\
**Post date:** [June 21, 2024, 5:21am UTC](https://forum.inductiveautomation.com/t/questions-regarding-style-props-and-how-they-behave-when-they-are-nested/92195/1 "2024-06-21T05:21:12Z")

</div>

Hi!

I have created a perspective component that has a dynamic number of elements (like a multistate button). I have some questions regarding it's props:

1. In the designer, when I click the + button next to the prop, how do I make it so that by default it add another object with the same shcema? For example below is the multistate button's state prop where if you click the + button, item 3 appears by default  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/8/78f99493384ffc074f0de552ed5ca4f512b7bc77.png)

2. How do I bring up the style selection tray in a child object (like the selectedStyle item shown above). My attemp is as below:

```python
        "styleConfig": {
            "type": "array",
            "description": "An array of styles",
            "default": [
                {
                    "iconStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    }
                },
                {
                    "iconStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    }
                }
            ]
        }

```

but it just come out like this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6b9edab7abe96763855b1b2ab259a5ef168404f1.png)  
there are no icon to bring up the style selection tray

1. Is it possible to apply the "visibleWhen" property a styling prop? Below is how I try to do it and it always appears:

```python
        "buttonStyle": {
            "$ref": "urn:ignition-schema:schemas/style-properties.schema.json",
            "default": {
                "classes": ""
            },
            "visibleWhen": {
                "property": "buttonType",
                "equals": "user"
            }
        }

```

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [June 21, 2024, 6:08am UTC](https://forum.inductiveautomation.com/t/questions-regarding-style-props-and-how-they-behave-when-they-are-nested/92195/2 "2024-06-21T06:08:23Z")

</div>

1. You need to use the `items` property [(Json-Schema Array Reference)](https://json-schema.org/understanding-json-schema/reference/array).

```json
// The multistate button schema probably looks something like this...
{
    "properties": {
        "states": {
            "type": "array",
            "items": {
                "type": "object",
                "default": {
                    "text": "",
                    "value": "",
                    "selectedStyle": {},
                    "unselectedStyle": {}
                },
                "properties": {
                    "text": {
                        "type": "string"
                    },
                    "value": {
                        "type": "string"
                    },
                    "selectedStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    },
                    "unselectedStyle": {
                        "$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
                    }
                }
            }
        }
    }
}

```

1. The schema reference shouldn't be under `default`, but instead under the property definition. See #1.

2. I'm not sure what's possible with conditional styling. I've only played around with it enough to know it's kinda limited.