CODEWITHSUNDEEP
cssreactjsmaterial-designmaterial-ui
Peter Weyand
Peter Weyand

Reputation: 2259

Material UI doesn't support colored text on multiline textfield (React)

So I am trying to use the material ui library in a react app. I have found that seemingly the styling of the colored text doesnt work for multiline textfields. Look at this example: 

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


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

So the above doesn't properly style the textfield text color. However if I get rid of the multiLine and rows attributes it works correctly (either with the hex color or the color supplied by the material UI library). This is very frustrating for me as it breaks the style I was aiming at. If anyone knows a fix for this I would really appreciate it. I think there might not be however. If you go to http://www.material-ui.com/#/components/text-field you will notice that they have very not included an example of a multiline with styled background text color, although they have almost every other example. Hmm.....

Upvotes: 1

Views: 4130

Answers (3)

Erik Nomitch
Erik Nomitch

Reputation: 1665

I was able to solve this by using inputProps as shown in the docs here for MUI v.5.

<TextField
  multiline
  inputProps={{ style: { color: "red" } }}
  /* ... */
/>

Upvotes: 2

ian
ian

Reputation: 705

What worked for me is the inputProps property in conjunction with my global css file:

inputProps={{
  className: 'a-class-with-black-text-set-as-important'
}}

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

As per DOC:

inputStyle:

Override the inline-styles of the TextField's input element.

When multiLine is false: define the style of the input element.

When multiLine is true: define the style of the container of the textarea.

textareaStyle:

Override the inline-styles of the TextField's textarea element. The TextField use either a textarea or an input, this property has effects only when multiLine is true.

So you need to use textareaStyle for styling of text when multiline is true, like this:

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

Upvotes: 2

Related Questions