如何用css在svelte中瞄准组件？
如何用css在svelte中瞄准组件？
提问于 2019-07-11 12:01:16
我怎么做这样的事：
<style>
Nested {
color: blue;
}
</style>
<Nested />例如，如何将样式应用于来自其父组件的组件？
回答 6
Stack Overflow用户
回答已采纳
发布于 2020-01-24 10:08:12
您需要通过export将道具传递给父组件，然后将这些道具绑定到子组件中的类或样式。
您可以在要动态样式的子元素中放置一个样式标记，并使用您为父元素导出的变量直接确定样式的值，然后将标记上的颜色分配如下：
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested color="green"/><!-- in Nested.svelte -->
<script>
export let color;
</script>
<p style="color: {color}">
Yes this will work
</p>如果您只有一两种样式可调整，则这里的优点是灵活性，缺点是您无法从单个支柱中调整多个CSS属性。
或
您仍然可以使用:全局选择器，但只需将特定的ref添加到子元素中的样式，如下所示：
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested ref="green"/>
<style>
:global([ref=green]) {
background: green;
color: white;
padding: 5px;
border-radius: .5rem;
}
</style><!-- in Nested.svelte -->
<script>
export let ref;
</script>
<p {ref}>
Yes this will work also
</p>这确保全局只会影响子元素中的确切的ref元素，而不会影响任何其他类或本机元素。你可以在行动在这个REPL链接上中看到它
Stack Overflow用户
发布于 2019-07-11 12:51:01
我唯一能想到的方法是使用一个额外的div元素。
App.svelte
<script>
import Nested from './Nested.svelte'
</script>
<style>
div :global(.style-in-parent) {
color: green;
}
</style>
<div>
<Nested />
</div>Nested.svelte
<div class="style-in-parent">
Colored based on parent style
</div>多嵌套元素
如果您使用多个Nested组件，甚至可以允许类名是动态的，并且允许不同的颜色。这是一个链接到工作示例。
Stack Overflow用户
发布于 2020-07-14 04:21:20
您可以使用内联样式和$$props..。
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested style="background: green; color: white; padding: 10px; text-align: center; font-weight: bold" /><!-- in Nested.svelte -->
<script>
let stylish=$$props.style
</script>
<div style={stylish}>
Hello World
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56988717
复制相关文章
相似问题
腾讯云开发者
