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

Question

我一直在试图找出如何样式的材料ui TextField组件。

<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
    },
});

我的问题是，我似乎无法让文本字段的颜色变成白色。我似乎能够将样式应用于整个文本字段（因为宽度样式工作等）...但是我认为问题是我没有将样式应用到链的更下游和实际输入中。

我曾试图寻找其他关于传递输入道具的答案，但没有成功。

我已经尽了我最大的努力，但我想我需要问问是否有人知道我做错了什么。

它现在看起来是什么样子

Answer 1

这是一个具有内联样式的解决方案：

<TextField
    style={{
        backgroundColor: "blue"
    }}
    InputProps={{
        style: {
            color: "red"
        }
    }}
/>

Answer 2

这里的所有答案都显示了如何使用InputProps或inputProps来设计东西，但是没有人解释为什么，以及它是如何工作的。没有人解释输入道具和输入道具之间的区别

<TextField    
    variant="outlined"
    // inputProps are used to pass attributes native to the underlying 
    // HTML input element, e.g. name, id, style.
    inputProps={{
      style: { textAlign: 'center' },
    }

    // InputProps (capital I) passes props to the wrapper Material 
    // component. Can be  one of the following: Input, FilledInput, 
    // OutlinedInput. You can pass here anything that the underlying
    // Material component uses: error, value, onChange, and classes.
    InputProps={{
       // Usually you don't need className, the `classes` object will
       // be sufficient. However, you can also use it and this will
       // add your class to the div of the InputBase.
       className: styles.slider_filter_input, 
       classes: {
          root: classes.root
          focused: classes.focused
          // The list of keys you pass here depend on your variant
          // If for example you used variant="outlined", then you need
          // to check the CSS API of the OutlinedInput.
       }
    }}
/>

这是一个工作代码框，显示了上面的想法。

Answer 3

您需要将InputProps属性添加到文本字段。

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,
    }}
/>

另外，您还可以设置标签的样式或使用此处所述的替代。