Disegnare un componente materiale-ui TextField sottolineaFocusStyle su css normale - css, reactjs, material-ui, inline-styles

Nei componenti di Material-UI puoi dare un oggetto di stile per il componente stesso come attributo sul tag JSX, ma devi dare un oggetto di stile separato per underlineFocusStyle, ad esempio.

Intendo per esempio il componente TextField "underlineFocusStyle.

Lo stile come:

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

Ora, come scriverlo in un normale css. Lo stile di sottolineaturaFocusStyle del componente in cima allo stile dello stesso stile del componente TextField?

come, lo stile per la larghezza del TextField sarebbe ovviamente:

larghezza: 100%

ma come sarebbe il design di sottolineatura di FocusStyle? Qualcosa di simile a:

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

Perché mi piacerebbe dare uno stile per il componente, che deve essere scritto in css. Grazie.

risposte:

È possibile applicare gli stili CSS per sottolineareFocusStyle e anche per qualsiasi componente del materiale-ui. Dichiara un oggetto const style e aggiungi il tuo css come sotto

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

e quindi passare questo oggetto di stile per sottolineare gli oggetti di scena di FocusStyle come di seguito

<TextField underlineFocusStyle={style} />

Spero che questo risponda alla tua domanda.