Change border color on Material-UI TextField

问题

This should be simple but for some reason I can't figure out how to change the border color on a TextField

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

It's basically just copied from the docs, where on the outline is white, so I can't figure out what might be messing this up on my end.

I tried to reproduce on jsfiddle or something but couldn't find one that would allow me to import the TextField module

回答1:

Below is an example of how to override the color of the outline on the outlined variant of TextField. This shows using three different colors: one for the default, one for hover, and a different one when the input has focus.

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

回答2:

TextField does not accept the style propriety:

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

what you can do is adding className and style it

来源：https://stackoverflow.com/questions/58963242/change-border-color-on-material-ui-textfield

标签

reactjs

material-ui