A generalized layout of my application is below, it's a directory where upon click of a person the directory goes away and displays more details on that person with a "close" button that reverts back to the directory. Functionality works fine.
App.svelte
<script lang="ts">//// import component //////// api fetch for directory /////// api fetch for details ///</script>{#if !details}/// display directory ///<a on:click( // do a function to fetch details of person and set details as true //) > person </a>{/#if}{#if details}<div class="profile_overlay"><DetailsBox {details} {closebtn} /></div>{/#if}<style>//// all of the styling for the directory, that's plainly programmed within app.svelte works and renders find, putting any of the details styling here does not work //// // test 1) this does not work, the browser just uses default H1 styling .profile_overlay .details__Name { color: red } // test 3) this does not work, the browser just uses default H1 styling .profile_overlay :global(.details__Name) { color: red } // test 4) this does not work, the browser just uses default H1 styling .profile_overlay :global(h1) { color: red }</style>DetailsBox.svelte
<script> export let details = {}; //pull in api fetch from app.svelte export let closeDetails; //pull in closedetails function</script> <svelte:options tag="details-component" /><h1 class="details__Name">{details.FirstName} {details.LastName}</h1><style> // test 2) this does not work, the browser just uses default H1 styling .details__Name { color: red }</style>Can someone tell me what I'm not understanding about Svelte component styling? I did also notice that when the styling is only in DetailsBox.svelte it's not grabbed into the application's styling upon build.