【问题标题】:Vuetify .input-group__details change min-height impossibleVuetify .input-group__details 无法更改最小高度
【发布时间】:2018-05-22 05:14:44
【问题描述】:

我不是 CSS 专家,但直到现在我还没有看到任何这样的“问题”。

所以,我正在使用 Vuetify,并为我的搜索表单添加了一个..

现在该组件正在创建:

<div input-group input-group--prepend-icon input-group--text-field primary--text>
  <label for="search"></label>
  <div class="input-group__input"></div>
  <div class="input-group__details"></div>
  <div class="input-group__messages"></div>
</div>

现在我的问题是 .input-group__messages 类有一个最小高度,我希望它有 1px 或在这种情况下不显示,但我无法从我的组件中编辑它......有去根风格的方法,但我不想这样做我想学习或知道我错过了什么问题。

期待某人的回复

【问题讨论】:

    标签: css vuetify.js


    【解决方案1】:

    你需要vue-loader版本12.2+并使用Deep selectors

    使用 CSS(也 适用stylus,但您的 IDE 可能会引发语法错误):

    >>> .input-group__messages {
        min-height: 1px;
    }
    

    或 SCSS:

    /deep/ .input-group__messages {
        min-height: 1px;
    }
    


    如果上述方法不起作用,请参阅this answer 以获取解释和其他可能的解决方案。

    【讨论】:

    • thnx 兄弟,我从来没有听说过 deep 实际上我直到现在才使用它,但现在我的问题已经解决了,我学到了一些新东西 :) 感谢你的帮助
    猜你喜欢
    • 2021-09-03
    • 2021-06-05
    • 1970-01-01
    • 1970-01-01
    • 2019-11-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多