如何更改文本字段的焦点颜色？

Question

我正在使用 Material-UI React 库，并且我需要TextField在单击或聚焦时更改 a 的边框颜色（视情况而定）。

这是我尝试过的：

const useFormFieldStyles = makeStyles((theme) => ({
  input: {
    borderWidth: '1px',
    fontWeight: 'bold',
    '& .MuiOutlinedInput-input:focused': {
      borderColor: 'green',
    }
  }
}));

然而，borderColor尽管我付出了一切努力，它仍然是蓝色的。

我怎样才能做到这一点？

Answer 1

材质-UI v5

更改焦点颜色的最简单方法TextField是设置colorprops，这是非常有限的，因为它只接受这些值（颜色可以扩展，但您需要编写一些代码）。

'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'

如果想更改为任意颜色，请使用以下代码：

const CssTextField = styled(TextField, {
  shouldForwardProp: (props) => props !== "focusColor"
})((p) => ({
  // input label when focused
  "& label.Mui-focused": {
    color: p.focusColor
  },
  // focused color for input with variant='standard'
  "& .MuiInput-underline:after": {
    borderBottomColor: p.focusColor
  },
  // focused color for input with variant='filled'
  "& .MuiFilledInput-underline:after": {
    borderBottomColor: p.focusColor
  },
  // focused color for input with variant='outlined'
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: p.focusColor
    }
  }
}));

用法

const CssTextField = styled(TextField, {
  shouldForwardProp: (props) => props !== "focusColor"
})((p) => ({
  // input label when focused
  "& label.Mui-focused": {
    color: p.focusColor
  },
  // focused color for input with variant='standard'
  "& .MuiInput-underline:after": {
    borderBottomColor: p.focusColor
  },
  // focused color for input with variant='filled'
  "& .MuiFilledInput-underline:after": {
    borderBottomColor: p.focusColor
  },
  // focused color for input with variant='outlined'
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: p.focusColor
    }
  }
}));

现场演示

材质-UI v4

请参阅自定义输入部分。下面的示例设置了TextField3 个变体的焦点颜色边框和标签的样式：

const focusedColor = "orange";
const useStyles = makeStyles({
  root: {
    // input label when focused
    "& label.Mui-focused": {
      color: focusedColor
    },
    // focused color for input with variant='standard'
    "& .MuiInput-underline:after": {
      borderBottomColor: focusedColor
    },
    // focused color for input with variant='filled'
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: focusedColor
    },
    // focused color for input with variant='outlined'
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: focusedColor
      }
    }
  }
});

export default function CustomizedInputs() {
  const classes = useStyles();

  return (
    <div style={{ display: "flex", columnGap: 15 }}>
      <TextField className={classes.root} variant="outlined" />
      <TextField className={classes.root} variant="standard" />
      <TextField className={classes.root} variant="filled" />
    </div>
  );
}

现场演示

Answer 2

现在使用 Mui Textfield 中的 sx 属性，您还可以使用以下内容来更改焦点轮廓的颜色：

const style = {
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "green"
    }
  }
}    

<TextField sx={style} ...(your other props)/>

如果您还想在字段聚焦时更改标签的颜色，可以将其添加到样式变量中：

const style = {
  "& label.Mui-focused": {
    color: "green"
  },
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "green"
    }
  }
}