ReactJS material-ui TextField apply css

Question

Im using material-ui with Reactjs. I want to apply on a TextField some custom styles using css. Specifically I want to change the color of the TextField underline and TextField label when I click the input.

I know that I could do it inline with the component but I want to use className and css.

Any ideas ?

Thanks

which version of material-ui are you using? if you are using v1, then you can check this example material-ui-next.com/demos/text-fields — Anurag
– Anurag, Commented Nov 16, 2017 at 12:02
@talentedandrew In this case, I would prefer to wait to material-ui v1 when the alpha version will released — Aceconhielo
– Aceconhielo, Commented Nov 17, 2017 at 12:32

Vlad Povalii · Accepted Answer · 2017-11-17 10:51:39Z

Since material-ui uses inline styles in JS, its not very convinient and easy to do a custom styling of components by css classes, but its still possible with !important keyword.

First you need to add cutom css class to TextField:

<TextField id="text-field-default" className="text-field-custom" defaultValue="Default Value" />

Then, for example, underline style can be overriden like that:

.text-field-custom>input:focus+div>hr { border-bottom: 2px solid rgb(0, 0, 0) !important; }

Collectives™ on Stack Overflow

ReactJS material-ui TextField apply css

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related