Hi Sudhir,

This happens because DataGrid 2 and Gallery default styles override your dynamic class.

Just add this in theme/web/main.scss:

.redText {
    color: red !important;
}

.blackText {
    color: black !important;
}

Then on your Text widget → Class, use:

if $currentObject/YourCondition then 'redText' else 'blackText'

Also make sure the class is applied on the Text widget, not the container.

Finally, do Clean Deployment Directory and run again. This will fix it.

Thanks !

The reason the text remains black is not because dynamic class does not work — it is because Atlas / DataGrid2 CSS specificity is overriding your custom class.

This is very common in:

• Data Grid 2
• Gallery inside Data Grid 2
• Custom content columns
• Atlas UI themes

Why Your Dynamic Class Is Not Working

In DataGrid2:

• Text widget is wrapped inside internal <span> or <div>
• Atlas applies default class like:

.mx-text
.mx-datagrid2-cell

• Atlas theme CSS has higher specificity
• So your .redText { color: red; } gets overridden

Result → text stays black.

Working Solution

Step 1 – Create Proper CSS With Higher Specificity

Go to:

theme/web/custom.css

Add:

.dg-red-text {
    color: #d32f2f !important;
}

.dg-black-text {
    color: #000000 !important;
}

IMPORTANT: !important is required because Atlas overrides text color.

Step 2 – Set Dynamic Class Properly

On the Text widget inside Gallery:

Dynamic class:

if $currentObject/RequiredValue = true
then 'dg-red-text'
else 'dg-black-text'

Do NOT include dot (.).

Only class name string.

Correct:

'dg-red-text'

Wrong:

'.dg-red-text'

Step 3 – Ensure CSS Is Loaded

After adding CSS:

• Right click project → Clean Deployment Directory
• Run the app again
• Hard refresh browser (Ctrl + Shift + R)

If It Still Does Not Work

Sometimes DataGrid2 wraps content deeper.

In that case use:

.mx-datagrid2 .dg-red-text {
    color: #d32f2f !important;
}

This increases specificity.

Cleaner Approach

Instead of dynamic class, you can use:

Text widget → Style property → Conditional visibility → CSS class

OR

Use Conditional Formatting in Data Grid 2 (if applicable to your version).

But dynamic class with proper CSS is fully supported.

Common Mistakes That Cause This Issue

1. CSS placed in wrong file (should be in theme/web)
2. Missing !important
3. Forgetting to redeploy
4. Using wrong class name in dynamic expression
5. Condition referencing wrong context object
6. DataGrid2 row context confusion (should use $currentObject)

Final Working Example

CSS

.dg-red-text {
    color: red !important;
}

Dynamic Class

if $currentObject/RequiredValue > 0
then 'dg-red-text'
else ''

This will 100% change the text color inside Data Grid 2 custom content.

Your issue is caused by Atlas CSS overriding your dynamic class.

Adding a properly scoped CSS class with !important resolves it completely.

Your dynamic class is probably applied, but Atlas is overriding the color.

Add this to theme/web/main.scss:

In your Text widget (as shown in the screenshot):

.mx-datagrid2 .text-red {
    color: red !important;
}

.mx-datagrid2 .text-black {
    color: black !important;
}

In the Text widget, go to Properties → Dynamic classes and click the … button. This is where you define which CSS class should be applied dynamically.

Add a new expression. The expression must return only the class name as text. For example:

if $CurrentObject/IsCondition then 'text-red' else 'text-black'

Make sure that IsCondition is a Boolean attribute. Also, do not write any CSS code in the Dynamic classes field — only the class names like text-red or text-black.

After defining this, ensure that the corresponding CSS is added in theme/web/main.scss, and then rebuild the app.

If this resolves the issue, please close the topic.

Hi,

Thanks to all, but unfortunately nothing is working for me.

follwoing is my scss code

.InProgressTask {

color : red !important ;

}

Find the above details and provide me the exact scss structure.

Regards

Sudhir

Hi Sudhir T

I want to know how you added the dynamic class , For a container or any text if you write a dynamic class it shouldnt have the default class on styling section, If you want then the name of the default class and dynamic class shouldnt match.

I hope it helps if not share more info please!!

Hi Gurumoorthy,

On the Text Object,

if $currentObject/Status = SafetyAudit.ENU_Status.Completed then 'CompletedTask' else 'InProgressTask'

Regards,

Sudhir