Search code examples
cssreactjsmaterial-uiinline-styles

Styling a material-ui TextField component's underlineFocusStyle on normal css

In Material-UI's components you can give a style object for the component itself as an attribute on the JSX tag, but you have to give a separate style object for the underlineFocusStyle for example.

I mean for example TextField component's underlineFocusStyle.

You would style it like:

<TextField hintText="Hint Text" style={{width: '80%'}}
  underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>

Now, how to write that in normal css. The styling of that underlineFocusStyle of the component on top of styling the TextField component's style itself?

like, the style for the TextField's width would be of course:

width: 100%

but how the underlineFocusStyle would be styled? Something like:

width: 100&
.underline-focus-style: background-color: #000FF

Because I'd like to give a style for the component, which has to be written in css. Thank you.

Solution

  • You can apply css styles to underlineFocusStyle and also to any material-ui component. Declare a const style object and add your css like below

    const style = {
   "background-color": "#fff", color:"#333"
}

    and then pass this style object to underlineFocusStyle props like below

    <TextField underlineFocusStyle={style} />

    Hope this answers your question.