CSS changes not reflicting inside the Modal

[GhitaB]

i'm trying to style one message inside a modal pop up in the service scriptbut seems like the changes are not reflicting

CUSTOM_MESSAGE:"<p class='custom-msg' please use this <a href='google.com'>Link</a></p>",

and in the controller this is what i have:

	var modalParam = {
			message: $sce.trustAsHtml($scope.data.i18n.CUSTOM_MESSAGE_ISOLV),
			
		};

.custom-msg {
color: red !important;
}

how can i let the changes to be visible on the modal.

[Ankur Bawiskar]

@GhitaB 

share your complete requirement and scripts here

[GhitaB]

i have the HTML and client controller and server script they are too long so that why i've shared only where i have the issue

i just want to apply a style on that custom message inside the modal pop up i tried to do the style inside the html line in the server script it didn t work so i created a class in css and it didn t work as well

[Ankur Bawiskar]

@GhitaB 

are you rendering modal using spModal?

see this

Change the styling of a modal window in the portal 

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[MaxMixali · Accepted solution]

Verification:

1. Modal rendering context: spModal renders in a separate DOM context outside the widget's scope
2. CSS isolation: Widget CSS is scoped and won't apply to modal content
3. Actual solution needed: Inline styles in the HTML string itself

Correct solution:

javascript

CUSTOM_MESSAGE: "<p style='color: red;'>please use this <a href='google.com'>Link</a></p>",

The modal content is rendered outside your widget's CSS scope, so you must use inline styles directly in the HTML string. Widget CSS classes won't apply to spModal content.   Hope that can Help