How to Apply CSS Width to a Nested Div in a Razor Component Without Modifying the Component?

I am working with a Razor component that generates a nested <div> structure, and I need to apply a width: 100%; style to the outer <div>. However, I cannot modify the component directly, and it does not expose any style or class properties.

Here’s the HTML structure generated by the component:

<div class="pr-6 pl-3 py-4 "><div class="flex space-x-4"><!-- Other content here --></div></div>

Attempts Made:

• I tried adding a new CSS class in the xy.razor.css file, but I cannot find the div to apply the styles.
• I attempted to use the following selectors without success:

code:

::deep div.pr-6.pl-3.py-4 {     width: 100%;}.pr-6.pl-3.py-4 {     width: 100%;}

Questions:

• Is there a way to apply width: 100%; to this div using CSS in thecontext of a Razor component?
• Are there specific strategies for targeting nested divs when theirstyles cannot be modified directly?

Additional Information:

• Using JavaScript to modify the DOM is not a viable solution in this case.