1,通过全局样式
新建common.css,并在main.js中引入import "./assets/style/common.css";
可以用来修改项目整体颜色风格
2单个组件<style></style>中不要加scope,修改第三方样式的不加,自己的样式加
<style></style>
<style scoped></style>
3:deep将废弃:
/deep/
深度修改标签样式
找到需要修改的 ElementUI 标签的类名,然后在类名前加上 /deep/
,可以强制修改默认样式。这种方式可以直接用到有 scoped
属性的 style 标签中。
// 修改级联选择框的默认宽度
/deep/ .el-cascader {
width: 100%;
}
4:通过内联样式 或者 绑定类样式覆盖默认样式
通过内联样式 style ,绑定类样式的方式,可以在某些标签中可以直接覆盖默认样式,不是很通用。具体实例如下:
内联样式style
的方式:
<el-button :style="eSt">默认按钮</el-button>
<script>
export default {
data() {
return {
eSt: {
color: "white",
}
};
}
}
<