更改ReactJS中文本字段的行颜色

我正在使用ReactJS制作组件。因为我需要用不同的颜色自定义TextInput的行颜色（一个用于成功验证，另一个用于失败验证）

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet，TextInput}；
从“@material ui/core/TextField”导入TextField；
导出默认类CustomTextInput扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
};
}
render（）{
返回(
);
}
[！[成功验证][1][1]

首先，你可以使用

材质ui

的

错误
道具。如果你仍然想更改颜色，你应该使用
材质ui
的
和样式
或
制作样式
我在下面的代码中尝试过，导出默认函数CustomTextInput（道具）{const class=useStyles（）；const CustomTextInput=withStyles（{root:{'&label.Mui focused':{color:lableColor，}，&.MuiInput underline:after':{borderBottomColor:focusColor，}，}，}，&.MuiInput underline:before':{borderBottomColor:normalColor，}，}，}）（TextField）；}但是focus并没有很好地工作，如果我们保持函数外部的样式，那么它就工作了，但问题是如果我们保持函数外部的样式，那么我就不能使用propsIt。如果没有格式，阅读这样的代码真的很困难。我想你对
材质ui
样式有点困惑。如果你在这里提交更新的代码，我很乐意看一看（或编辑您的问题）。请更具体地说明什么不起作用以及在哪里：）
import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';
import TextField from '@material-ui/core/TextField';

export default class CustomTextInput extends Component {
constructor(props) {
super(props);
this.state = {
  name: '',
};
}
render() {
return (
  <View>
    <TextField
      style={{margin: 10}}
      id="standard-basic"
      label="Standard"
      error={false}
      inputProps={{maxlength: 12}}
      label="User Id"
    />
  </View>
);
}

[![success validation][1]][1]