在Material-UI TextField上更改边框颜色 [英] Change border color on Material-UI TextField

问题描述

这应该很简单，但是由于某些原因，我无法弄清楚如何更改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.

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

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

推荐答案

以下是如何在TextField的概述变体上覆盖轮廓颜色的示例.这显示了使用三种不同的颜色:一种是默认颜色，一种是悬停颜色，而当输入具有焦点时则是另一种颜色.

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

相关答案:

• 使用React material-ui更改OutlinedInput的轮廓
• 如何为OutlinedInput覆盖悬停notchedOutline
• 全局轮廓覆盖

• Change outline for OutlinedInput with React material-ui
• How do I override hover notchedOutline for OutlinedInput
• Global outlined override

这篇关于在Material-UI TextField上更改边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！