Attempting to utilize the material ui library in a react app has brought an issue to light. It appears that styling colored text does not work as expected for multiline textfields. Consider the following scenario:
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/>
{/*.......*/}
The issue arises when attempting to properly style the textfield text color with the given code snippet. Removing the multiLine and rows attributes allows the text color to be styled correctly (using either the hex color or the color provided by the material UI library). This discrepancy is quite frustrating as it hampers the intended style. If anyone has a solution for this problem, I would greatly appreciate it. Unfortunately, it seems there may not be a straightforward fix. Upon visiting http://www.material-ui.com/#/components/text-field, you will notice the absence of an example showcasing a multiline textfield with a styled background text color, despite including almost every other example. A puzzling omission indeed...