Backcolor material-ui 文本字段取决于值答案

【问题标题】：Backcolor material-ui textfield depending on valueBackcolor material-ui 文本字段取决于值
【发布时间】：2023-03-21 12:11:01
【问题描述】：

我有以下基于值数组生成文本字段的反应代码，我想根据绑定字段布尔值的值更改文本字段的背景色

array.map((result: IResult, idx: number) =>
                                        <Grid key={idx} item xs={2}>
                                            <TextField
                                                required
                                                variant="filled"
                                                fullWidth
                                                color =   // ?? (if !result.approved set backcolor yellow
                                                id={result.name}
                                                label={result.name}
                                                defaultValue={result.value}
                                                name={result.name} />
                                        </Grid>

【问题讨论】：

backcolor 你的意思是轮廓颜色还是输入的背景？
是的，这就是我的意思
轮廓颜色对吧？
是的，这很好，只是让它脱颖而出

标签： reactjs material-ui textfield

【解决方案1】：

color prop 在您突出显示输入边框的情况下无济于事。我浏览了this section (customized input) 并有如下解决方案

<TextField
  className={approved && classes.specialCase}
  ...
/>

【讨论】：

这正是我想要的，在我的代码中我得到以下错误“没有重载匹配这个调用。重载 1 of 2, '(props: TextFieldProps, context?: any): ReactElement ReactElement Component)> | null) | (new (props: any ) => Component<...>)> | Component<...> | null'，报如下错误。
键入'字符串 | false' 不可分配给类型 'string |不明确的'。类型 'false' 不可分配给类型 'string |不明确的'。重载 2 of 2, '(props: PropsWithChildren, context?: any): ReactElement ReactElement Component)> | null) | (new (props: any) => 组件<...>)> |组件<...> | null'，给出了以下错误。键入'字符串 | false' 不可分配给类型 'string |不明确的'。类型 'false' 不可分配给类型 'string |未定义'。

【解决方案2】：

Ciao，here 一个工作示例。基本上你必须这样做：

<ThemeProvider theme={theme}>
   <TextField
          required
          variant="filled"
          fullWidth
          color={!result.approved ? "primary" : "secondary"}
          id={result.name}
          label={result.name}
          defaultValue={result.value}
          name={result.name}
        />
</ThemeProvider>

如您所见，TextField 元素被包装到 ThemeProvider 中，为您提供在 theme 上定义的 primary（黄色）和 secondary（例如黑色）颜色。

theme 是这样定义的：

const Theme = {
  palette: {
    primary: {
      main: "#FFFF00"
    },
    secondary: {
      main: "#000000"
    }
 }
};

const theme = createMuiTheme(Theme);

【讨论】：