Question

全局CSS增强

可以在表单属性里最下方找到CSS增强的输入框，在这里可以写css样式，在预览的时候会自动应用你写的样式。 配合几乎每个组件都有CSS类名属性，就能做到单独对某一个或某些组件写样式修改了。

CSS增强示例

例如我向页面中拖入了一个单行文本组件，并且想要把这个输入框的文字颜色改为红色，需要有以下步骤：

1. 修改组件的CSS类名属性，增加一个类名，例如叫input-red

   

2. 在表单属性里的CSS增强中修改样式，如下所示：

   正确示例：

    .input-red .el-input__inner{
       color: red;
    }
   

3. 接着点预览查看效果

   

我们可以发现输入框的颜色并没有变成红色，这是因为element-ui将真正的input组件放到了更深层的dom里，我们可以用chrome的devTools工具查看一下

1. 找到真实的input类名，我们可以发现真实的input类名叫做el-input__inner

   

2. 再次修改CSS增强代码，如下图所示

   

3. 再点击预览查看一下效果，发现输入框的颜色已经变成红色了，并且还不会影响到其他组件。