使用 Angular 组件 clrForm 时，如何使表单中输入字段的宽度为 100% 清晰

Question

例子

<form clrForm>
    <clr-input-container>
        <label>Field 1 label</label>
        <input clrInput type="text" [(ngModel)]="model" name="example" style="width:100%" />
    </clr-input-container>
    <clr-input-container>
        <label>Field 2 label</label>
        <input clrInput type="text" [(ngModel)]="model" name="example" style="width:100%" />
    </clr-input-container>
</form>

上面是来自清晰表单的代码示例，我在表单中使用角度分量，问题是当我使用没有角度分量的表单时，当我给出 style="100%" 时，输入宽度为 100%，但如果我使用同样的东西使用角度分量，尽管我给了 style="100%"，但输入字段没有达到 100%。请让我知道在使用角度分量作为清晰度形式时如何将宽度设置为 100% 的原因。

Answer 1

100% 在全角表单上是很难看的，我承认这一点。但是，让我们采用登录组件/表单并将其转换为使用角度形式

<div class="login-wrapper">
    <form class="login" clrForm>

        <section class="title">
            <h3 class="welcome">Welcome to</h3>
            MyApp
        </section>

        <div class="login-group">

            <clr-input-container>
                <input clrInput class="username" type="text" id="username" name="username" placeholder="Username" [(ngModel)]="username">
            </clr-input-container>
            <clr-password-container>
                <input clrPassword id="password" name="password" [(ngModel)]="password" />
            </clr-password-container>

            <div class="checkbox">
                <input type="checkbox" id="rememberme">
                <label for="rememberme">
                    Remember me
                </label>
            </div>

            <button type="submit" class="btn btn-primary">SIGN IN</button>

        </div>
    </form>
</div>

这给出了这个丑陋的形式

那么你会如何设计这个呢？我尝试过添加

.clr-control-container {
    width: 100% !important;
}

到登录组件scss，但是不起作用