如何设置材料-ui文本字段的样式-Java 学习之路

我一直在努力研究如何设计一个material-ui.next textfield组件（React JS） .

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

我的课程创建如下（我已附上相关部分）：

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

我的问题是，我似乎无法将文本字段的颜色更改为白色 . 我似乎能够将样式应用于整个文本字段（因为宽度样式工作等）...但我认为问题是我没有在链中进一步应用样式并进入实际输入 .

我试图查看处理传递inputProps的其他答案，但没有成功 .

尽我所能尽力尝试一切，但我想要问是否有人知道我做错了什么 .

提前感谢您的时间 . 问候 . 安德烈

目前看起来像什么

What it currently looks like

3 回答

0
尝试在 TextField 上使用 inputStyle 道具 . 来自docs ......

inputStyle（object） - 覆盖TextField的input元素的内联样式 . 当multiLine为false时：定义input元素的样式 . 当multiLine为true时：定义textarea容器的样式 .
```
<TextField inputStyle={{ backgroundColor: 'red' }} />
```
回复于 2024-05-09T12:58:02+08:00
1

这实际上取决于你究竟想要改变什么 .

该文档有一些关于自定义TextFields的示例，请在此处查看它们：

https://material-ui.com/demos/text-fields/#customized-inputs

有关自定义的更多信息，请访问：

https://material-ui.com/customization/overrides/

和

https://material-ui.com/customization/themes/

您是否尝试过使用！对颜色变化很重要？当我尝试为概述的TextField的边框设置默认颜色时，我遇到了同样的问题

看看这个：https://stackblitz.com/edit/material-ui-custom-outline-color

回复于 2024-05-09T12:58:02+08:00

您需要将 InputProps 属性添加到TextField .

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',            
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
    input: {
        color: 'white'
    }
});

JSX：

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
    InputProps={{
        className: classes.input,
    }}
/>

另外，您还可以设置标签样式或使用here所述的覆盖 .

回复于 2024-05-09T12:58:02+08:00

如何设置材料-ui文本字段的样式

3 回答

相关问题