CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Aceconhielo
Aceconhielo

Reputation: 3636

ReactJS material-ui TextField apply css

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

Upvotes: 0

Views: 3544

Answers (1)

Vlad Povalii
Vlad Povalii

Reputation: 1640

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;
}

Upvotes: 1

Related Questions