Styling eines Material-ui TextField-Komponente UnterstreichungFokus Stil auf normalen CSS - CSS, reactjs, Material-ui, Inline-Stile

In den Komponenten der Material-UI können Sie ein Style-Objekt für die Komponente selbst als Attribut für das JSX-Tag angeben, aber Sie müssen beispielsweise ein separates Style-Objekt für underlineFocusStyle angeben.

Ich meine zum Beispiel TextField-Komponente underlineFocusStyle.

Sie würden es gerne so gestalten:

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

Nun, wie man das in normaler CSS schreibt. Das Styling dieses underlineFocusStyle der Komponente, zusätzlich zum Stil der TextField-Komponente.

Der Stil für die Breite des TextFields wäre natürlich:

Breite: 100%

aber wie würde der underlineFocusStyle gestaltet werden? So etwas wie:

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

Denn ich möchte der Komponente einen Stil geben, der in css geschrieben werden muss.

Antworten:

Sie können CSS-Stile auf underlineFocusStyle und auch auf alle Material-Ui-Komponenten anwenden. Deklarieren Sie ein const-Objekt und fügen Sie Ihre CSS-Datei wie folgt hinzu

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

und übergeben Sie dieses Stilobjekt anschließend an underlineFocusStyle-Requisiten

<TextField underlineFocusStyle={style} />

Hoffe das beantwortet deine Frage.