Adding a css class to knockout without breaking the default code

[SannNL]

I'm trying to add a css class in the field.html that is used on checkout.

My code:

<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope},
css: additionalClasses,
css: {hideBusiness: dontShowField(element.inputName)}">

Now it does add the 'hideBusiness' class but the default class '_required' gets removed from the field. I'm not sure why that is?

This is the output:

<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses, css: {hideBusiness: dontShowField(element.inputName)}" data-mspdevtools-ui="91cce697fb40dbd783700346b3670c29" name="shippingAddress.firstname">
~~ other code ~~
</div>

Without my code it outputs:

<div class="field _required" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" data-mspdevtools-ui="31d1a4eee47d38a859d9852323de30f1" name="shippingAddress.firstname">
~~ other code ~~
</div>

I feel like it might have to do with the double css binding but i'm not sure how to combine them?

[SannNL · Accepted solution]

That sadly didn't work. I ended up copying abstract.js from view/form and adding it in the _setClasses function to additionalClasses.

[Rakesh Jesadiya]

@SannNL

You dont need to override core file you can add extra css class using below way,

<div class="field" css="additionalClasses" data-bind="visible: visible, attr: {'name': element.dataScope},css: {hideBusiness: dontShowField(element.inputName)}">