项目中如何修改UI框架的默认样式

我们在使用elementUI时，只能使用框架自带的样式，普通的修改方法并不能实现，我整理了下面几种修改样式的方法。

1. 行内修改样式

通过在行内设置style修改，用于局部组件块

<el-button style="color: white;margin-top:20px;>默认按钮</el-button>

2. scoped问题

这里因为给 style 设置了 scoped ，所以无法修改样式，可以去掉 scoped 。

注意：此时该样式会污染全局样式，可以把它放在公共的css里面为了不让所有的el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput

3. deep样式穿透方法

在不去掉 scoped 的情况下，我们可以使用 /deep/ 来更改样式

/deep/.el-timeline-item__node {background-color: rgb(255, 208, 75) !important;
}

4. 使用 >>>

在不使用 less / sass 的情况下，推荐使用 >>>

注：less/sass 预处理无法解析 >>>.在这种情况下你可以采用/deep/来代替 >>> 从而达到深度修改组建的样式。

项目中如何修改UI框架的默认样式相关推荐

修改taro-ui的样式，在自定义组件中使用taro-ui，修改ui框架样式
其实修改ui框架的样式还是很容易碰见的,但是每个框架处理的方式可能还有点不太一样, taro编译出来的小程序样式. addGlobalClass 添加这个只能让我们修改页面中的taro-ui 样式 ...
hadoop 依赖式job_Java项目中使用XXL-JOB调度框架
Java项目中使用XXL-JOB调度框架我们的最近几个新项目在使用XXL-JOB进行任务调度,今天就分享下这个框架. XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量 ...
说说如何在项目中引入 jBPM4 工作流框架以及遇到的坑儿
由于各种原因,我们需要在项目中引入 jBPM4 工作流框架,遇到了不少问题,今记录如下O(∩_∩)O 1 引入步骤 1.1 加入依赖包非 Maven 项目,在 lib 包中加入 jbpm.jar. ...
Vue入门到上手（10）—— VueJs 填坑日记之在项目中使用Amaze UI
Vue入门到上手(10)-- VueJs 填坑日记之在项目中使用Amaze UI 上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Ama ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
项目中如何修改element-ui的默认样式
一.去除scoped 去掉style的scoped,用最外层盒子的class名包裹需要修改组件的class名例: <template> <el-container cla ...
mpvue项目中使用第三方UI组件库
原文链接最新声明本文编写时间较早,随着时间的推移,mpvue及其周边生态越来越完善,文中的案例已经不适合在项目使用.希望大家参考其他更新的文章~ 简介微信小程序上线已有一年多时间啦,自美团的mp ...
uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版
文章目录第一步,HBuilder X中新建一个uni-app的项目第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd ...
微信小程序中使用第三方ui框架方法
安装步骤安装前确定电脑上安装了node. (没有设置探宝镜像的先设置淘宝镜像,安装速度更快) 设置淘宝镜像: npm config set registry https://registry.npm ...