# Perspective Component Style

**URL:** <https://forum.inductiveautomation.com/t/perspective-component-style/60195>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [May 31, 2022, 8:17am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195 "2022-05-31T08:17:35Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\
**Post date:** [May 31, 2022, 8:17am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/1 "2022-05-31T08:17:35Z")

</div>

I would like to give the possibility to customize a component using the style property.

`"style":{ "$ref":"urn:ignition-schema:schemas/style-properties.schema.json" }`

What is the best way to use this style object in the front-end ? (in tsx)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 31, 2022, 9:21am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/2 "2022-05-31T09:21:43Z")

</div>

Those styles will be added through the emit(). in the upper level of your component. Which you already should be using for positoning ect.  
`{...this.props.emit()}`

---

<div class="post-metadata">

**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\
**Post date:** [June 1, 2022, 9:57am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/3 "2022-06-01T09:57:35Z")

</div>

Thanks a lot @victordcq !  
I didn’t think the style tag would be enough, I probably still lack knowledge in react.

It seems that I have to add “psc-” in front of all the classes defined in the project styles in order for them to be taken into account.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d90a38c883e02b56641a8cef4e212ff4cb5dd04c.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 1, 2022, 10:00am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/4 "2022-06-01T10:00:31Z")

</div>

Yes if you dont use the emit you will have to parse it yourself.  
Its not necessarily related to react, but more to how igntion passes along the properties^^

You will have to use the emit() somewhere though (best in the top level div), else your component will not be positioned correctly in the view.

this is what it says in the example

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/d/7d50aae356b465825b0a61c4402a2e17af3daefc.png)

---

<div class="post-metadata">

**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\
**Post date:** [June 1, 2022, 10:44am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/5 "2022-06-01T10:44:51Z")

</div>

I feel like I need to parse the class list in any case.

{…this.props.emit({classes: ans[“style”][“classes”]})} // Doesn’t work

“classes” expects an array while the classes coming from the props of the component ans[“style”][“classes”] are a String.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 1, 2022, 11:22am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/6 "2022-06-01T11:22:57Z")

</div>

Your upper div should contain `{...this.props.emit()}`, because the position data is in there.  
The classesNames defined in the props.style will also automatically be provided through there.

i believe this will also work for the other styles  
`this.props.ans[x].emit()`

it proabbly should look like this

`{...ans.emit()}`  
or maybe  
`{...ans.style.emit()}`

```auto
<div {...this.props.emit()}>
  {props.configuration.map({
    //annotions map ...
    <div {...ans.emit()}>

```

---

<div class="post-metadata">

**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\
**Post date:** [June 1, 2022, 11:53am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/7 "2022-06-01T11:53:46Z")

</div>

> [@victordcq](#):
>
> `{...ans.emit()}`  
> or maybe  
> `{...ans.style.emit()}`

I just test with {...this.props.emit()} on the main div and now I completely understand the concept you just explained.  
But as you have understood, I am in a particular case where we have a list of items (so a list of style too).

I just tested {...ans.emit()} and {...ans.style.emit()} but it does not work.  
It raises the following error: TypeError: ans.style.emit is not a function / TypeError: ans.emit is not a function

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f209806aa43d3ce8f14361d9852d03d508326378.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 1, 2022, 11:58am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/8 "2022-06-01T11:58:28Z")

</div>

can you show me how you defined the

> [@e.sagnelonge](#):
>
> "style":{ "$ref":"urn:ignition-schema:schemas/style-properties.schema.json" }

for the annotations?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 1, 2022, 12:20pm UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/10 "2022-06-01T12:20:00Z")

</div>

Please post code in a code block, not as a screen shot. Especially with a black background (hard on the eyes of anyone older than 40 or so).

---

<div class="post-metadata">

**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\
**Post date:** [June 1, 2022, 12:45pm UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/11 "2022-06-01T12:45:12Z")

</div>

I thought found solution but it was a mistake…  
This is what my property structure looks like :

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/9576e58532f3eb22d149aa1168bfdb804b5bea2d.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 1, 2022, 1:28pm UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/12 "2022-06-01T13:28:31Z")

</div>

> [@pturmel](#):
>
> Please post code in a code block, not as a screen shot.

Would be neat if there was a plugin for discourse to allow for screenshots to automatically be converted into formatted text snippets, with the ability to either see the automatically generated text or the provided screenshot.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 1, 2022, 1:35pm UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/13 "2022-06-01T13:35:16Z")

</div>

I’d rather the editor just detect screenshots of text and put a suggestion on the preview pane. Something like “This image appears to be mostly text. You should post the text instead, in a code block if necessary, to avoid being called out by irate interlocutors.”

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 2, 2022, 7:17am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/14 "2022-06-02T07:17:41Z")

</div>

Heh it seems the props are turned into objects the moment you go deeper into them. causing them to loose the emit function…  
And it turns out you dont really want to use the emit anyways since there the position props are in it too, which is not what you want for a list.

So instead you could do something like this, but i guess your methode is just as fine (aslong as you have the base emit in the upper level)

```auto
<div {...this.props.emit()}>
  {props.configuration.map((cnf,cnfId)=>{
    cnf["annotations"].map((ans,ansId)=>{
      const styleProps = this.props.store.props
              .readStyle("configuration[" + cnfId+ "].annotations[" + ansId + "].style")
              .toStyleProps()
      return <div className={styleProps.className + " annotation-markers"} style={styleProps.style}>{ans["value"]} </div>
    })
  })}
</div>

```

---

<div class="post-metadata">

**Author:** ![e.sagnelonge](https://avatars.discourse-cdn.com/v4/letter/e/7cd45c/32.png) [@e.sagnelonge](https://forum.inductiveautomation.com/u/e.sagnelonge)\
**Post date:** [June 2, 2022, 8:47am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/15 "2022-06-02T08:47:51Z")

</div>

> [@victordcq](#):
>
> `className={styleProps.className + " annotation-markers"} style={styleProps.style}`

I think you are absolutely right and your proposal works very well !  
I finally decided to use this solution to use the emitter.

```auto
<div {...emit()}>
	{/* tslint:disable-next-line:jsx-no-multiline-js */}
	{props.configuration.map((cnf) => {
		return cnf["annotations"].map((ans: Object) => {
			const styleProps = PropertyTree.parseStyle(ans["style"])
				.addClasses(['annotation-marker']);

			// tslint:disable-next-line:jsx-key
			return <div id={ans["id"]} {...emit(styleProps.toEmitProps())}>{ans["value"]}</div>;
		});
	})}
</div>

```

Thanks again @victordcq for all the time you took to help me !

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 2, 2022, 9:21am UTC](https://forum.inductiveautomation.com/t/perspective-component-style/60195/16 "2022-06-02T09:21:13Z")

</div>

> [@e.sagnelonge](#):
>
> `PropertyTree.parseStyle(ans["style"])`

heh thats a good one, better than my answer^^