请教一个关于scoped的问题

来源：9-7 Toast 弹窗组件的开发

目訫

2021-03-12

看着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>

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

写回答

1回答