vue+element换肤不能作用到element所有组件？

Question

1.项目目前实现了换肤，原理是利用element自定义主题工具生成两套皮肤，根据用户切换动态创建link标签插入到body，效果已实现，但是发现样式只满足个别组件，例如输入框的颜色，按钮的颜色，不能影响到navmenu导航组件和tree树组件
2.目前只能在已生成好皮肤基础上，再去自定义改变navmen和tree组件的样式，比如选中后背景色，鼠标移入背景色，默认背景色等
3.以下是动态切换主题的代码：

let body = document.getElementsByTagName('BODY')[0]
    switch (this.currentTheme) {
      case 'custom4dadf7':
        this.styleHref = './static/theme/custom4dadf7/index.css'
        this.styleHref2 = './static/theme/custom4dadf7/override.css'
        body.className = 'custom4dadf7'
        break
      case 'custom1098ad':
        this.styleHref = './static/theme/custom1098ad/index.css'
        this.styleHref2 = './static/theme/custom1098ad/override.css'
        body.className = 'custom1098ad'
        break
      case 'red':
        this.styleHref = './static/theme/red/index.css'
        body.className = 'custom-red'
        break
      default:
        this.styleHref = './static/theme/custom4dadf7/index.css'
        this.styleHref2 = './static/theme/custom4dadf7/override.css'
        body.className = 'custom4dadf7'
    }
    let head = document.getElementsByTagName('HEAD')[0]
    let style = document.createElement('link')
    style.href = this.styleHref
    style.rel = 'stylesheet'
    style.type = 'text/css'
    head.appendChild(style)
    let style2 = document.createElement('link')
    style2.href = this.styleHref2
    style2.rel = 'stylesheet'
    style2.type = 'text/css'
    head.appendChild(style2)

其中styleHref是根据官方提供的自定义工具生成的index.css文件，styleHref2是因为生成的样式文件不能影响到navmenu和tree等组件中，只有自己再另外写一个样式文件，手动去更改关于这2个组件的一些样式
4.确实是需要二次定义样式文件才能完美的进行换肤吗？ 或者说还有没有更好的换肤方案，一键换肤，系统的主题以后可能就维持在三套主题以下，不会太多
5.系统是经过webpack方式进行构建的

-----再补充下我的问题，进一步测试，发现其实官方工具自定义主题生成的样式文件已经作用到了navmenu和tree组件上，但是感觉并不全面，比如navmenu组件好像只是可以改动背景色，更详细的设置，比如菜单选中的背景色，字体的颜色，hover状态下的颜色设置也没起作用，这就需要自己又去重写这些样式太麻烦了