关于elementUI的css样式设置问题

Question

比如现在要使用 el-dialog 标签控件

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

      <el-dialog
        title="signal"
        :visible.sync="dialogVisible"
        size="tiny"
        :before-close="handleClose"
        id="el-title">
        <span id="dialog-body">Error</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">submit</el-button>
        </span>
      </el-dialog>

然后想要设置title 即signal的字体颜色

#el-title>div.el-dialog {
    color:red
  }

这么写不行，而且在chrome中显示一点反应都没有，根本没有设置上，如图

那么有疑问，应该怎么设置这个signal字体，还有为什么会出现这种设置不上style样式的情况？

给出chrome中所显示的源码

Answer 1

你可以设置一个新样式<style>不要加scope，这样就有效了，但是这样的样式将作用于每个这样的标签。具体你可以去看看我之前的提问，这个问题我之前提过

Answer 2

.home>>>.input{
    width: 100px;
}

Answer 3

elementui中已经有默认样式:.el-dialog__title {color: white !important;}
尝试下用#el-title .el-dialog__title {color: red!important;}

Answer 4

在CSS修改原样式.el-dialog__title{line-height:1;font-size:16px;font-weight:700;color:#1f2d3d}就可以了

Answer 5

请问楼主，这个问题解决了么？ 我这边也遇到了！求助!

Answer 6

我这边成功了,不知道有没有帮助,贴一下我的代码吧.
1、el-dialog 中增加 customClass 属性(这个好像跟版本有关系,有的版本是 custom-class)

<el-dialog" customClass="addUpdateDialog">

2、在下面加上 style. style 里不要加上 scoped 这个关键字,否则不生效.

<style lang="scss">
  .addUpdateDialog {
    .el-form-item__label {
      width: 120px !important;
    }

    .el-input {
      width: 500px;
    }
  }
</style>

这样之后,页面的 dialog 就会按照自己的样式了布局了.