先粘一张官方给出的UI样式

关于UI框架，用起来虽然很方便，但是样式却和所需的不一样，那么该如何修改成自己想要的样式呢？

在粘一张我自己修改后的样式图

不仅修改了button的背景色、文字颜色，更修改了上方提示气泡的背景色

官方api里没有看到如何修改button样式,所以我修改的方式就是在使用组件的地方，写行内样式

<el-tooltip
        style="color:white;border:none;background-color:#7ec9a1" 
        content="这里是内容一" 
        placement="top" 
        :enterable='false'>
        <el-button>tip 1</el-button>
</el-tooltip>

但是修改上方tip提示的样式，就遇到了一些小问题

• 第一就是没找到该dom
• 找到dom，就不知该如何修改

刚开始，在使用el-tooltip的地方，本以为直接查看元素就能找到dom节点，但是有些想当然了。在查阅一番资料文献之后，才发现，其实这个组件的层级，并不是在你使用他的地方，而是和你的app同一层级，所以在当前使用的地方找不到tip提示的dom节点

既然找到了，那就应该能够修改了吧？非也

根据官方定义使用的className名 el-tooltip__popper可以修改掉上方tip提示泡的背景色，但是下方的箭头却没修改成功，修改他的className也并没有效果

.el-tooltip__popper{
        background: rgba(0,0,0,0.65) !important;
    }

如果箭头的样式与tip提示的样式不一样，还不如不进行修改，不然会显得很突兀。再次查阅资料之后，发现可以修改箭头样式的方法，实际操作之后发现有效，代码如下：

.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
        border-top-color:  #595959 !important;
    }

需要注意的就是，该代码片段，需要写在根文件的style里，如果写在当前文件里也并非不可，但是需要将scope取消掉，原因在上方已阐述过一次。
该组件的层级不在于你使用的地方，它与跟文件属于统一层级