Question

这应该很简单，但是由于某些原因，我无法弄清楚如何更改TextField的边框颜色

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

它基本上只是从文档复制而来，轮廓上的白色是白色，因此我无法弄清楚到底是什么弄乱了。

我试图在jsfiddle上复制东西，但是找不到允许我导入TextField模块的

Answer 1

下面是一个如何在TextField的轮廓变体上覆盖轮廓颜色的示例。这显示了使用三种不同的颜色：一种是默认颜色，一种是悬停颜色，当输入具有焦点时另一种颜色。

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"
    }
  }
});

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 TextField

2 个答案: