ReactJS material-ui TextField apply css

0
votes

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

1
javascriptcssreactjsmaterial-ui
Look for styled-components. - kind user
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
@talentedandrew Im using 0.19.4 - Aceconhielo
@talentedandrew In this case, I would prefer to wait to material-ui v1 when the alpha version will released - Aceconhielo

1 Answers

1
votes

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