Material-Ui文本字段提示文本不起作用

Question

I want to design textfield according to job requirement. I am assigning background to TextField. Now when background color is assigned then its hintText is gone. Then i have to set z-index of that label manually.

Now hintText is showing but when i click on that text then Textfield is not working and when i click outside of text then it is working.

This is my textfield style:

        <TextField
        hintText="Rate"
        className="rateText"
        inputStyle={{background:"#fff",paddingLeft: "3px"}}
    style={{paddingBottom:"10px"}}
hintStyle={{color: "rgba(0,0,0,.26)",zIndex: "1",bottom: "20px",left: "5px"}} 

/>

Answer 1

Try setting the backgroundColor on the style, rather than the inputStyle. The textbox itself will remain transparent and its placeholder text will continue to work, but the white background of the container div will show through:

    <TextField
      hintText="Rate"
      style={{ backgroundColor: '#fff' }}
    />