项目中修改element-ui的默认样式

项目中修改element-ui的默认样式

新建全局样式表

新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下：

import "./assets/style/global.css";

在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。

通过内联样式 或者 绑定类样式覆盖默认样式

通过内联样式 style ，绑定类样式的方式，可以在某些标签中可以直接覆盖默认样式，不是很通用。

<el-button :style="selfstyle">默认按钮</el-button>
<script>
    export default {
      data() {
        return {
            selfstyle: {
                color: "white",
		marginTop: "10px",
		width: "100px",
		backgroundColor: "cadetblue"
            }
        };
      }
    }
</script>

通过绑定修改样式方式修改：

<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
  export default {
    data() {
      return {
        selfbutton: "self-button"
      };
    } 
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.self-button {
    color: white;
    margin-top: 10px;
    width: 100px;
    background-Color: cadetblue;
}
</style>

使用 >>> 深度修改标签样式

//没有scss,less
<style scoped>
  .a >>> .b { /* ... */ }
</style>

有less的

<style scoped lang='less'>
    @deep: ~'>>>';
      .box {
        @{deep} .title {
            ...
        }
      }
</style>