Body 元素上的 Vue JS 样式绑定答案

【问题标题】：Vue JS style binding on the Body ElementBody 元素上的 Vue JS 样式绑定
【发布时间】：2021-10-07 02:18:48
【问题描述】：

我的前端有整个主题系统它基于使用 mixin 更改 CSS 变量来更改颜色：

  --sysPrimary: #03d5f7;
  --sysSecondary: #05fcac;
  --sysHover: #76D9F5;
  --sysWarning: #ff4146;
  --sysBackground: #23242c;
  --sysDarkbackground: #202228;
  --sysInputBg: #494b54;
  --sysGrey: #bbbbbb;
  --sysText: #ffffff;

  --menuPrimary: #03d5f7;
  --menuSecondary: #05fcac;
  --menuHover: #76D9F5;
  --menuText: #000000;
  --menuTextHover: #000000;
  --menuIcons: #000000;
  --menuIconsHover: #000000;

因此，只需单击一个按钮，我就可以选择一个键，css 变量也会相应地改变

_systemStyles() {
            return {
                '--sysPrimary': this._colorTheme.primary,
                '--sysSecondary': this._colorTheme.secondary,
                '--sysHover': this._colorTheme.hover,
                '--sysWarning': this._colorTheme.warning,
                '--sysBackground': this._colorTheme.bg,
                '--sysDarkBackground': this._colorTheme.darkBg,
                '--sysText': this._colorTheme.text,
                '--sysGrey': this._colorTheme.grey,

                '--menuPrimary': this._colorTheme.menu_primary,
                '--menuSecondary': this._colorTheme.menu_secondary,
                '--menuHover': this._colorTheme.menu_hover,
                '--menuText': this._colorTheme.menu_text,
                '--menuTextHover': this._colorTheme.menu_text_hover,
                '--menuIcons': this._colorTheme.menu_icons,
                '--menuIconsHover': this._colorTheme.menu_icons_hover,
            }
        },

我所做的只是在我的 app.vue 文件中添加:style="_systemStyles"，仅此而已……一切都是自动化的。

现在，当我使用在我的<body></body> 标记上呈现 HTML 元素的第三方库时出现问题。由于我的应用程序嵌套在我的正文中，因此只有嵌套在我的应用程序中的元素会受到我的 CSS 变量更改的影响。由于该库附加在主体级别...它仅获取变量的根定义。

我需要一种方法将我的 body 元素与我的 _systemStyles 对象进行样式绑定。

我尝试过的事情：

获取 body 元素并尝试用我的对象覆盖其样式 - 不计算

在我呈现应用程序的服务器上导入我的 scss 文件 - 没有真正发生超出范围

基本上就是这样......我想不出其他解决方案。

是的，当然我用谷歌搜索过，这是一个复杂的问题......

【问题讨论】：

标签： javascript html css vue.js vuejs2

【解决方案1】：

            ```document.body.style = `--sysPrimary:${this.COLOR_THEME.primary};--sysSecondary:${this.COLOR_THEME.secondary};--sysHover:${this.COLOR_THEME.hover};--sysWarning:${this.COLOR_THEME.warning};--sysBackground:${this.COLOR_THEME.bg};--sysDarkBackground:${this.COLOR_THEME.darkBg};--sysText:${this.COLOR_THEME.text};--sysGrey:${this.COLOR_THEME.grey};--menuPrimary:${this.COLOR_THEME.menu_primary};--menuSecondary:${this.COLOR_THEME.menu_secondary};--menuHover:${this.COLOR_THEME.menu_hover};--menuText:${this.COLOR_THEME.menu_text};--menuTextHover:${this.COLOR_THEME.menu_text_hover};--menuIcons:${this.COLOR_THEME.menu_icons};--menuIconsHover:${this.COLOR_THEME.menu_icons_hover}`;```

使用插值解析普通样式字符串以覆盖正文样式

我正在使用观察者获取当前主题键并覆盖数据中的主题对象 - 这样我可以同时通过 JS 和 CSS 访问它:)

我的老板最终提出了解决方案。相当干净整洁

       '$store.state.menu.themeKey': {
           handler(newVal) {
               if (newVal === this.COLOR_THEME.key) return;
               this.COLOR_THEME = {
                   ...this.COLOR_SETS.find(theme => theme.key === newVal),
                   //shared across all sets
                   darkBg: '#202228',
                   warning: '#ff4146',
                   grey: '#bbbbbb',
               };
               document.body.style = `--sysPrimary:${this.COLOR_THEME.primary};--sysSecondary:${this.COLOR_THEME.secondary};--sysHover:${this.COLOR_THEME.hover};--sysWarning:${this.COLOR_THEME.warning};--sysBackground:${this.COLOR_THEME.bg};--sysDarkBackground:${this.COLOR_THEME.darkBg};--sysText:${this.COLOR_THEME.text};--sysGrey:${this.COLOR_THEME.grey};--menuPrimary:${this.COLOR_THEME.menu_primary};--menuSecondary:${this.COLOR_THEME.menu_secondary};--menuHover:${this.COLOR_THEME.menu_hover};--menuText:${this.COLOR_THEME.menu_text};--menuTextHover:${this.COLOR_THEME.menu_text_hover};--menuIcons:${this.COLOR_THEME.menu_icons};--menuIconsHover:${this.COLOR_THEME.menu_icons_hover}`;
           },
           immediate: true,
       }
   },```

【讨论】：