Custom style on specific component is not working

Good morning,
I'm forcing the checkbox color in an Alarm Status Table in perspective in this way

} .ia_checkbox__icon--useColor { fill: var(--neutral-30) } {

and it works good, but the problem is that even in other checkboxes that I've in the project the color changes.

So I try this code and I select the class in the alarm status table style, but it's not working, where is the mistake guys?

You can modify the css and add a ID identifier to the front here is what the style would look like:

} #YourIdentifierHere .ia_component .......

Then inside of the component in the meta section add a new meta property called "domId"
Inside if this you would call YourIdentifierHere

Here is an example where I have done it:

image

This removes shadows as you can see on normal tables I have a shadow:
image

But the one with the dom ID does not have shadows:
image

image
You need to put the folders also in the name here.

BUT instead of just / its needs to be \/
so
somethign like .psc-Componenti\/Alarm...\/checkbox
image

2 Likes

Thanks both for the help, actually the @victordcq solution is very easy to implement, I tried to insert the path but not with the \/.

Thanks again

2 Likes

I take this opportunity to ask another thing.

I'm trying to do the same with more properties at the same time.. this work for all the dataTimeInput

} .ia_dateTimeInputComponent input { font-Family: Noto Sans; font-size: clamp(8px, calc(0.52*(1vmax + 1vmin)), 16px) ; color: var(--neutral-100) ; } {

if I convert it this

} .psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent input { font-Family: Noto Sans; font-size: clamp(8px, calc(0.52*(1vmax + 1vmin)), 16px) ; color: var(--neutral-100) ; } {

it's not working in this way, I try even adding !important like this (i'm sure if it is correct)

} .psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent input { font-Family: Noto Sans !important; font-size: clamp(8px, calc(0.52*(1vmax + 1vmin)), 16px) !important; color: var(--neutral-100) !important ; } {

Am I doing something wrong concatenating more properties?

Sometimes depending on how perspective made its styling, you are not allowed to put a space between these, im guesing its something like that

So try .psc-Componenti\/DateTime\/text.ia_dateTimeInputComponent

btw if you are gonna use a lot of these styles i suggest you take a look at the advanced stylesheet

3 Likes

Thanks again @victordcq that was the problem, this is crazy because I'm using this

} .psc-Componenti\/AlarmStatusTable\/checkbox_acknowledge .ia_checkbox__icon--useColor { fill: var(--neutral-30); } {

and is working with the space.

Thanks for the link, I'll study it as soon as possible if this is the best option to move on

It depends on how the html is made. A space means its on an element below

example:

<div class=".psc-Componenti\/AlarmStatusTable\/checkbox_acknowledge">
<span class=".ia_checkbox__icon--useColor">
...

While without a space is if its on the same level

<input class=".psc-Componenti\/DateTime\/text .ia_dateTimeInputComponent">
...

You can only know what the perspective component uses by inspecting the generated html,

3 Likes