删除来自材料ui的文本框的填充

时间:2018-11-21 19:15:58

标签: javascript html css reactjs material-ui

我正在尝试从文本框中删除填充,但问题是它来自“材质”用户界面。

我为所有类的填充都设置了0,但是填充仍然没有删除。

您能告诉我如何删除此填充物吗?

if (db.open) {
    QSqlQuery q;
    if (q.prepare("SELECT id FROM Things WHERE parent_id = ?")) {
        q.bindValue(0, 1);
        if (q.exec) {
            //DO STUFF
}   }   }

这是我的代码和一个沙箱:

https://codesandbox.io/s/m58841kkwp

.MuiOutlinedInput-input-1708 {
    padding: 18.5px 14px;
}

3 个答案:

答案 0 :(得分:1)

此答案中的解决方案enter link description here

将className传递给TextField以及InputProps

<TextField multiline={true} variant="outlined" rowsMax={10} placeholder="Notes" className={classes.formInput}
            InputProps={{ classes: { input: classes.formAreaInput } }} fullWidth onChange={this.handleNotesInput} />

答案 1 :(得分:0)

一种解决方法是创建一个有用的类并覆盖材料文本字段的样式。这样您将使其可重用

我留下例子 https://stackblitz.com/edit/react-textfield-without-padding

注意:我以5px的间距填充它,以使其看起来更好。您可以对其进行自定义,因此无需填充

有用的资源

答案 2 :(得分:0)

如果您阅读docs,则可以找到将属性应用于本机输入元素的inputProps(不是InputProps)属性。如下所示,您可以传递样式属性。

<TextField
    inputProps={{
       style: {
         padding: 5
       }
    }}
/>