学习笔记230517 --解决vue项目中使用第三方组件中，插槽的样式无法修改的问题

今天使用AntDesign第三方组件库的a-model对话框组件时，发现一个小现象。现分享和解决方法如下，欢迎各位同行和前辈们指教…

• 首先，标题是以slot插槽的形式写入a-model对话框组件中，但是设置的css样式无效果
  

• 要想使css样式有效，样式就不能设置在template标签上，解决的方法有两种

  • 用设置了slot的template标签包裹html标签，css样式设置在html标签上
    

  • 直接使用html标签，slot和css样式设置在html标签上
    

• 结果css样式有效：
  

【扩展：对于具名插槽的使用】

<waike>
    方式1：<div slot="id"></div>
	方式2：<template v-slot="id"></template>  
	方式3：<template #id></template>  
	方式4：<tempalte slot="id"></template>  
</waike>

问题

template标签上无法使用css样式嘛？( 欢迎各位同行指教，能够在评论区告诉我😁😁😁🤞🤞 )