1

Let's say I am building composite component, and part of it is:

  <InputNumber class="testing" ...

When "testing" is global CSS class name it works fine, but if it is local to my component, because of CSS isolation it won't work.

So my question is -- is there a way to make the second scenario work too? I.e. keep CSS class definition local (isolated) and yet pass to child component? In "extreme" case is there a way to share it -- that is, use this class both in my component and in child one as well?

greenoldman
  • 16,895
  • 26
  • 119
  • 185

1 Answers1

1

It works when you put a <div> around it and add ::deep to the style:

MyComponent.razor

<div>
 
  ...
  <InputNumber class="testing" ... />

</div

MyComponent.razor.css


::deep .testing {
  ...
}

but i have no clue as to why the <div> is needed.

H H
  • 263,252
  • 30
  • 330
  • 514
  • Thank you very much, I tested `div`, `span`, and then without additional element. It works in all those cases. – greenoldman Jul 24 '23 at 20:18
  • I couldn't get it to work w/o the div, I'll look into that later. – H H Jul 24 '23 at 20:19
  • 2
    That's been my experience, too: that outer div is absolutely required. I suppose without it, there's nothing to attach the Css key id to. – Bennyboy1973 Jul 25 '23 at 04:27
  • 1
    @greenoldman post an outline of your component, I guess there is an outer div there. – H H Jul 26 '23 at 06:28
  • @HH, my mistake, I thought this wrapping element is needed for this particular component. In general sense yes, I have outer `div` for entire Blazor page. I am sorry for the confusion. – greenoldman Jul 26 '23 at 14:13