reactjs 防止编辑材质UI文本字段背景更改颜色

fhity93d 于 2023-06-22 发布在 React

关注(0)|答案(1)|浏览(98)

我正在使用'@material-ui/core：^4.12.3'和使用Textfield组件。
我有一个文本字段：

编辑后，文本字段背景颜色从白色更改为#E8F0FE：

如何防止编辑字段后更改颜色？任何建议对我来说都很有意义！
我的文本字段：

<TextField
      {...field}
      value={displayValue ?? field.value}
      onChange={handleChange}
      label={label}
      placeholder={isFocused ? placeholder : undefined}
      error={invalid}
      helperText={invalid && error}
      disabled={disabled}
      onFocus={handleFocus}
      onBlur={handleBlur}
      multiline={multiline}
      InputProps={{
        classes: {
          input: className
        },
        disableUnderline: disableUnderline,
        inputComponent: inputComponent
      }}
      InputLabelProps={{
        shrink: true,
        style: {
          fontSize: '15px',
          ...labelStyle
        },
        classes: {
          shrink: classes.inputLabel
        }
      }}
      inputProps={{
        'aria-label': label
      }}
      FormHelperTextProps={{
        style: {
          ...helperTextStyle
        }
      }}
      {...rest}
    />

非常感谢！

reactjs

来源：https://stackoverflow.com/questions/76430287/prevent-material-ui-textfield-background-change-color-from-editing

1条答案

按热度按时间

z0qdvdin1#

你必须使用makeStyles来覆盖它的默认CSS样式。
我写了这个代码。

import { TextField } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  textFieldStyle: {
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: "red",
      },
    },
  },
}));

function App() {
  const classes = useStyles();

  return (
    <>
      <TextField
        fullWidth
        variant="outlined"
        className={classes.textFieldStyle}
      />
    </>
  );
}

export default App;

在TextField被聚焦后，我已经应用了红色边框，你可以在那里添加更多的CSS，并可以根据你的要求改变它。
你可以试试这段代码，如果有任何问题，请告诉我。

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 防止编辑材质UI文本字段背景更改颜色

1条答案

相关问题

热门标签

最新问答