profile
viewpoint

Ask questionsNot able to set custom css class on Components

Hi there,

I'm wondering how to style a single sveltestrap component. I found other issues with similar problems that styled the components using :global. This obviously styles all the components. But only applying a style to a single component seems so obvious to me, that I'm currently refusing to believe that this isn't possible.

Here's a reproducable example:

  • Create a new Svelte project degit sveltejs/template my-test-project
  • Converted to TypeScript node scripts/setupTypeScript.js
  • Installed dependencies npm install
  • Installed sveltestrap npm install sveltestrap
  • Changed the src/App.svelte file like that:
<script>
	export let name;
  import { Button, Col, Row } from 'sveltestrap';
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
  <Row>
    <Col class="hello-world">
      <Button color="primary" outline>Hello World!</Button>
    </Col>
  </Row>
</main>

<style>
  @import "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css";
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
  
  .hello-world {
    background-color: #ff0000;
  }
</style>

What I expected to happen?

The column component would pick up my hello-world class and have a red background

What actually happened?

I get a compile warning:

(!) Plugin svelte: Unused CSS selector ".hello-world"
src/App.svelte
36:   }
37:   
38:   .hello-world {
      ^
39:     background-color: #ff0000;
40:   }

The resulting HTML actually has a "hello-world" class, but not a special svelte class as usual components.

If I use the default bootstrap class, i.e. replace <Col class="hello-world"> with <div class="col hello-world"> everything works as expected.

Is it really not possible like that or am I missing something here?

bestguy/sveltestrap

Answer questions osiris86

Wow, very quick reply. Thank you! That makes sense to me. Obviously, I'm fairly new to svelte and wasn't aware of these limitations. This just seemed like such a common problem to me (and it kinda is, as the discussion in the linked PR suggests :) ).

Closing this, since this isn't an issue with sveltestrap. Thanks for your help!

useful!

Related questions

No questions were found.
source:https://uonfu.com/
Github User Rank List