Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #104006
    Patrick Hume
    Participant

    so if I have a smart bazlor control on a blazor razor page say “Foo.razor” and my css for that smart blazor control in “Foo.razor.css” the css will apply so long as I add “::deep smart-some-contol” to the css that I want to apply to the smart blazor control however if I have the smart bazlor control on a component razor page that’s loaded in my page the css no longer applies regardless of if I put it in the parent page css or child component css and only works if i put it in the global app css but I don’t want to have to do that, I tried using ::shawdo but that didn’t work, what’s the correct css to get the css to apply to the child page component?

    parent:
    Foo.razor
    Foo.razor.css

       some html
       <bar />
    

    child component:
    bar.razor
    bar.razor.css

    thanks

    • This topic was modified 1 year, 10 months ago by Patrick Hume.
    #104011
    ivanpeevski
    Participant

    Hi Patrick,

    The Blazor CSS Isolation works by attaching a random attribute to the HTML element that works as a selector. However, our controls are generated dynamically and then selector key is lost. The trick is to wrap the blazor controls in a normal HTML element such as div, span or p. In this way, the selector key will be attached to the wrapper HTML and the inner controls will remain selectable. For example:

     

    parent.razor:

    <Child/>

     

    child.razor:

    <div><Button>Test</Button></div>

     

    child.razor.css:

    ::deep smart-button {
      background: red;
    }

    OR(if you wish to be more specific):

    div ::deep smart-button {
      background: red;
    }

     

    This creates a red button. I hope this was of help!

    Please feel free to contact us again, if you need further support

    Best Regards,
    Ivan Peevski

    Smart UI Team
    https://www.htmlelements.com/

     

    • This reply was modified 1 year, 10 months ago by ivanpeevski.
    • This reply was modified 1 year, 10 months ago by ivanpeevski.
    #104017
    Patrick Hume
    Participant

    ah I see, thank you that helps explain it, I understand why it wasn’t working now, 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.