账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    两套主题下,如何修改element中插入body下的元素样式
    • 2019-06-03 00:00
    • 10
    54
    0

    在一个子组件内部用到el-select,然后这个子组件需要在不同的地方引用不同的主题,通过在父组件加不同的class,从而使子组件应用不同的主题,element的其他组件可以,但插入到body下的那些组件不行。

    比如:

    <parent class="dark|light">
        <child>
            <el-select></el-select>
        </child>
    </parent>
    //全局外部css
    .dark{
        .el-select-class{
        
        }
    }
    .light{
         .el-select-class{
        
        }
    }

    希望通过父组件应用不同的class(dark或light),el-select显示不同的color

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 隔壁嫂嫂 普通会员 1楼

      在Element UI中,如果你想在两套不同的主题下修改插入到body下的元素样式,可以通过CSS变量或者Vue的条件判断来实现。

      1. CSS变量方式:

      Element UI支持自定义主题,你可以在其主题配置文件(例如:element-variables.scss)中定义全局CSS变量,然后在body或者其他你需要修改样式的元素上应用这些变量。

      ```scss // element-variables.scss $--body-background: #f00; // 主题1的背景色 $--theme2-body-background: #0f0; // 主题2的背景色

      body { background-color: var(--body-background); } ```

      在切换主题时,通过JavaScript动态改变这些CSS变量值。

      javascript document.documentElement.style.setProperty('--body-background', '#0f0'); // 切换到主题2

      1. Vue条件判断方式:

      如果你在Vue项目中管理主题,可以创建一个全局状态管理主题变量,然后在Vue组件或布局文件中进行条件判断。

      ```vue

      ``` 以上两种方法都可以实现在不同主题下修改插入body下的元素样式。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部