问:MDC TextField边距

时间:2018-11-19 10:03:50

标签: css reactjs sass material-components

据我了解,

使用Sass Mixins是自定义MDC元素的正确方法。我有一个关于MDC TextField的问题:我正在使用多个概述的TextField创建表单,TextField是这样设置的:

<TextField label="Foo" outlined={true} dense={true}>
    <Input
        name="item.foo"
        value={item.foo}
        onChange={this.handleChange}
    />
</TextField>
<p />
<TextField label="Bar" outlined={true} dense={true}>
    <Input
        name="item.bar"
        value={item.bar}
        onChange={this.handleChange}
    />
</TextField>

问题:左上方的浮动标签与前一个字段重叠,在这种情况下,浮动的“ Bar”将与前一个元素的轮廓重​​叠。 为了解决这个问题,我使用了一个包含以下内容的scss文件:

.mdc-text-field {
    margin-top: 7px;
}

这可以按预期工作并解决了重叠问题,但是我不知道我是否做得正确,因为我认为只有Sass Mixins是自定义MDC元素的正确方法。

0 个答案:

没有答案