更改 Material-UI TextField 上的邊框顏色

Question

這應該很簡單，但由於某種原因，我無法弄清楚如何更改 TextField 上的邊框顏色

<TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" />

它基本上只是從文檔中復制的，輪廓上的輪廓是白色的，所以我無法弄清楚到底是什么搞砸了。

我試圖在 jsfiddle 或其他東西上重現，但找不到可以讓我導入 TextField 模塊的東西

Answer 1

下面是如何覆蓋輪廓顏色 label 並在TextField的輪廓變體上輸入文本的 v4 示例（下方的 v5 示例）。 這顯示了使用三種不同的 colors：一種用於默認（綠色），一種用於 hover（紅色），以及當輸入具有焦點時（紫色）另一種。

import React from "react";
import ReactDOM from "react-dom";

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

const useStyles = makeStyles({
  root: {
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    },
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-outlined": {
      color: "green"
    },
    "&:hover .MuiInputLabel-outlined": {
      color: "red"
    },
    "& .MuiInputLabel-outlined.Mui-focused": {
      color: "purple"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        defaultValue="My Default Value"
        variant="outlined"
        label="My Label"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

下面是使用 Material-UI v5 的類似示例。 這使用styled而不是makeStyles並利用更類型安全的方式（在 v5 中添加）來引用全局 class 名稱（例如.${outlinedInputClasses.root} ），但繼續硬編碼全局 class 名稱（例如.MuiOutlinedInput-root ）仍然可以正常工作（硬編碼時語法更簡單，但對拼寫錯誤的保護較少且沒有自動完成幫助）。

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { outlinedInputClasses } from "@material-ui/core/OutlinedInput";
import { inputLabelClasses } from "@material-ui/core/InputLabel";
import { styled } from "@material-ui/core/styles";

const StyledTextField = styled(TextField)({
  [`& .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "green"
  },
  [`&:hover .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "red"
  },
  [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
    borderColor: "purple"
  },
  [`& .${outlinedInputClasses.input}`]: {
    color: "green"
  },
  [`&:hover .${outlinedInputClasses.input}`]: {
    color: "red"
  },
  [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.input}`]: {
    color: "purple"
  },
  [`& .${inputLabelClasses.outlined}`]: {
    color: "green"
  },
  [`&:hover .${inputLabelClasses.outlined}`]: {
    color: "red"
  },
  [`& .${inputLabelClasses.outlined}.${inputLabelClasses.focused}`]: {
    color: "purple"
  }
});

function App() {
  return (
    <div className="App">
      <StyledTextField
        defaultValue="My Default Value"
        variant="outlined"
        label="My Label"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

相關答案：

• 使用 React material-ui 更改 OutlinedInput 的輪廓
• 如何為 OutlinedInput 覆蓋 hover notchedOutline
• 全局概述覆蓋

Answer 2

TextField不接受樣式屬性：

https://codesandbox.io/s/45if2

你可以做的是添加className並設置它的樣式