Material UI unterstützt keinen farbigen Text im mehrzeiligen Textfeld (React)

Question

Also ich versuche, die Materialbibliothek in einer reactive App zu verwenden. Ich habe festgestellt, dass das Styling des farbigen Textes anscheinend nicht für mehrzeilige Textfelder funktioniert. Sehen Sie sich dieses Beispiel an:

import React, { Component } from 'react'; 
import axios from 'axios'; 
import ListContact from './ListContact'; 
import Paper from 'material-ui/Paper'; 
import TextField from 'material-ui/TextField'; 
import Button from './Button'; 
import {orange500, blue500} from 'material-ui/styles/colors'; 




const styles = { 
    textInput: { 
    marginRight: '10px', 
    color: orange500, 
    // #F3C677 
    }, 
    textInputInput: { 
    color: orange500, 
    // #F3C677 
    }, 
}; 





class ContactsPage extends Component { 

    {/*.......*/} 


        <TextField 
        hintText="notes" 
        onChange={(e)=>this.setState({notes: e.target.value })} 
        style={styles.textInput} 
        inputStyle={styles.textInputInput} 
        multiLine={true} 
        rows={2} 
        /><br/> 


    {/*.......*/} 

Also die oben genannten formatiert nicht richtig die Textfeldtextfarbe. Wenn ich jedoch die Attribute multiLine und rows loslasse, funktioniert es korrekt (entweder mit der Hex-Farbe oder der Farbe, die von der Material-UI-Bibliothek geliefert wird). Das ist sehr frustrierend für mich, da es den Stil sprengt, den ich anstrebte. Wenn jemand eine Lösung dafür kennt, würde ich es sehr schätzen. Ich denke, es könnte aber nicht sein. Wenn Sie zu http://www.material-ui.com/#/components/text-field gehen, werden Sie feststellen, dass sie kein Beispiel für eine Multilinie mit formatierter Hintergrundtextfarbe enthalten haben, obwohl sie fast jedes andere Beispiel haben. Hmm .....

Answer 1

Per DOC:

inputStyle: 

Überschreiben Sie die Inline-Stile des Eingangselementes des TextField-.

Wenn multiLine falsch ist: Definieren Sie den Stil des Eingabeelements.

Wenn multiLine wahr ist: definieren Sie den Stil des Containers der Textarea.

textareaStyle: 

Überschreiben Sie die Inline-Stile der Textarea-Elements TextField-. Das TextField verwendet entweder ein Textfeld oder eine Eingabe. Diese Eigenschaft hat nur Effekte, wenn multiLine wahr ist.

So müssen Sie textareaStyle für Styling von Text verwenden, wenn mehrzeilige wahr ist, wie folgt aus:

<TextField 
    rows={2} 
    hintText="notes" 
    multiLine={true} 
    style={styles.textInput} 
    textareaStyle={styles.textInputInput} 
    onChange={(e)=>this.setState({notes: e.target.value })} 
/>