【前端】uni-app使用element-ui自定义样式

在uni-app中引入了element-ui后作为手机端ui实现，最近提了一个需求，要做一个公告栏弹框。
在编写代码的时候，就使用了官方的示例。

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

但是在显示上，想修改这个MessageBox的width时，一直不能生效。后来发现了一个问题，uni-app的这个style需要在app.vue的文件中添加样式才能修改MessageBox的样式。

this.$alert(this.notice, '公告', {
    // 自定义样式
    customClass: 'el-alert-width'
});
app.vue

<style>
    .el-alert-width{
        width: 90%;
    }
</style>