close

How to style material-ui textfield

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to style material-ui textfield in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to style material-ui textfield ?

  1. How to style material-ui textfield ?

    to style material-ui textfield Try using the FilledInput component instead of TextField. Then you can use simple inline styling like this:
    style={{color: 'white' }}
    This also will lighten the placeholder text… hooray.

  2. How to style material-ui textfield ?

    to style material-ui textfield Try using the FilledInput component instead of TextField. Then you can use simple inline styling like this:
    style={{color: 'white' }}
    This also will lighten the placeholder text… hooray.

Method 1

This is a solution with inline styles:

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

Method 2

Try using the FilledInput component instead of TextField. Then you can use simple inline styling like this:

style={{color: 'white' }}

This also will lighten the placeholder text… hooray.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment