Стилизиране на материал-ui TextField компонент на underlineFocusStyle на нормални css-css, reactjs, материали-ui, inline-стилове

В компонентите на материала можете да дадете обект на стил за самия компонент като атрибут на маркера JSX, но трябва да дадете например отделен обект на стил за подсветката фокус.

Искам да кажа, например, TextField компонента на underlineFocusStyle.

Бихте го стил като:

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

Сега, как да напиша това в нормалния css. Стилът на този подчертаващ фокус на компонента върху стила на самия компонент на TextField?

Стилът за ширината на TextField ще бъде разбира се:

ширина: 100%

но как ще бъде оформено фокусното фолио? Нещо като:

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

Защото бих искал да дам стил за компонента, който трябва да бъде написан на css. Благодаря ви.

Отговори:

Можете да приложите CSS стилове, за да подчертаете FocusStyle, както и за всеки компонент от материал. Декларирайте обект стил const и добавете CSS както е показано по-долу

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

и след това преминете този обект на стил, за да подчертаете фокалните елементи на FocusStyle, както е показано по-долу

<TextField underlineFocusStyle={style} />

Надявам се това да отговори на вашия въпрос.