# How do I prevent default styles flashing on component with custom CSS

**URL:** <https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 18, 2023, 3:38pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297 "2023-09-18T15:38:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 18, 2023, 3:39pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/1 "2023-09-18T15:39:00Z")

</div>

I have a Flex Repeater component that is repeating a Button with certain parameters (including the button's Style property and a few others). I set it up this way to be able to control what each button looks like from the Repeater, if necessary.

The behavior I'm trying to get rid of is the ugly flash of the default Button style before the defined CSS is rendered.  
 ![flashing_styles](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6f808e2a47eebfac08cc55aa2f51445485cc796.gif)

What helps to get rid of the "flashing" (especially when its the bright `--callToAction` color) is to define an inline style on the button that is being repeated. This doesn't work for me, since I want to control each button's `style` from the repeater.

Is there a setting that I'm missing that I can turn on/off to get rid of this behavior? Is there a way to tell when the button is fully styled to maybe bind the `visible` property to? This bug has bothered me for a while and I could never get a good solution while also keeping components dynamic and reusable.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 18, 2023, 5:42pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/2 "2023-09-18T17:42:26Z")

</div>

Can you create a view with the button in it set to a default / neutral style, embed this in your flex repeater and set the style there? If you're using Perspective Styles / Classes (as you should be) then it should be just a matter of overwriting the style class in the embedded view.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 18, 2023, 6:07pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/3 "2023-09-18T18:07:35Z")

</div>

That's essentially what I'm doing... I have a view with a button and the default styles on that button are set to a neutral theme. It seems like if you're binding the `style` prop OR just the class (to me I don't see a difference using either method), you'll get that behavior above. The only way I can see where I don't see the flashing is if I set the button style in the view and not have the style be dynamic in any way.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [September 18, 2023, 6:38pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/4 "2023-09-18T18:38:59Z")

</div>

Did you set the style prop/class value to persistent as well? That will make sure it loads with whatever value it had in the designer. Otherwise it will wait on the binding to evaluate before filling the value.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 18, 2023, 6:54pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/5 "2023-09-18T18:54:44Z")

</div>

I did have Persistent marked everywhere except the Button's `style` property that was bound to the view's incoming parameter. I didn't turn it off myself - maybe when a property is bound to something, Persistent gets turned off automatically until it's turned on again.

Whatever the case may be, I think it's working a lot better and I'm not seeing flashing anymore. If that changes, I'll update this post but for now, I think my issue is resolved.

Thanks @ryan.white!

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [September 18, 2023, 7:00pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/6 "2023-09-18T19:00:18Z")

</div>

> [@YF129701](#):
>
> maybe when a property is bound to something, Persistent gets turned off automatically

I believe this is the case, yeah

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 18, 2023, 10:10pm UTC](https://forum.inductiveautomation.com/t/how-do-i-prevent-default-styles-flashing-on-component-with-custom-css/79297/7 "2023-09-18T22:10:55Z")

</div>

New bindings always default to be non-persistent.
