请教一个关于scoped的问题

Question

看着Toast组件简单，就想复习一下render函数，但是遇到了一个小问题，如果样式标签上面加上scoped的话，样式就会不生效，最后只好去掉了scoped关键词

<script>
import { h } from 'vue'

export default {
  props: ['message'],
  setup (props, context) {
    return () => h('div', { class: 'toast' }, props.message)
  }
}
</script>

<style lang="scss">
.toast {
  padding: .1rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .35);
  border-radius: .05rem;
  color: #fff;
}
</style>

网上查了一下，说是因为为了确保样式唯一性样式名称对不上，麻烦老师详细讲解一下

Answer 1

Dell 2021-03-14 13:00:19

是的，这块用render，你写的样式叫做toast，但是实际上，你加了scoped 之后，真正解析css的时候，会给前面加上一系列前缀，这和你的toast 就对应不上了，就错了。

• 提问者 目訫 #1

  那请问老师如何解决呢？

• Dell 回复 提问者 目訫 #2

  这个你就不要用render来写了