更改 Material-UI TextField 上的边框颜色 [英] Change border color on Material-UI TextField
问题描述
这应该很简单,但由于某种原因,我不知道如何更改 TextField 上的边框颜色
<TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined"/>
它基本上只是从文档中复制的,轮廓上的地方是白色的,所以我不知道是什么让我最后搞砸了.
我试图在 jsfiddle 或其他东西上重现,但找不到允许我导入 TextField 模块的一个
下面是一个 v4 示例(v5 示例进一步向下),说明如何覆盖 TextField
.这显示使用三种不同的颜色:一种用于默认(绿色),一种用于悬停(红色),另一种用于输入具有焦点时的颜色(紫色).
从反应"导入反应;从react-dom"导入 ReactDOM;从@material-ui/core/TextField"导入TextField;从@material-ui/core/styles"导入{makeStyles};const useStyles = makeStyles({根: {& &.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":{边框颜色:绿色"},&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":{边框颜色:红色"},& &.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":{边框颜色:紫色"},& &.MuiOutlinedInput-input":{颜色:绿色"},&:hover .MuiOutlinedInput-input":{颜色:红色"},& &.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input":{颜色:紫色"},& &.MuiInputLabel-outlined":{颜色:绿色"},&:hover .MuiInputLabel-outlined":{颜色:红色"},& &.MuiInputLabel-outlined.Mui-focused":{颜色:紫色"}}});功能应用(){const 类 = useStyles();返回 (<文本字段className={classes.root}defaultValue=我的默认值"变体=概述"标签=我的标签"/>);}const rootElement = document.getElementById(root");ReactDOM.render( , rootElement);
以下是使用 MUI v5 的类似示例.这使用 styled
而不是 makeStyles
并利用更类型安全的方式(在 v5 中添加)来引用全局类名(例如 .${outlinedInputClasses.root}
),但继续硬编码全局类名称(例如 .MuiOutlinedInput-root
)仍然可以正常工作(硬编码时语法更简单,但对拼写错误的保护较少并且没有自动完成帮助).
从反应"导入反应;从react-dom"导入 ReactDOM;从@mui/material/TextField"导入TextField;从@mui/material/OutlinedInput"导入{轮廓输入类};import { inputLabelClasses } from "@mui/material/InputLabel";import { styled } from "@mui/material/styles";const StyledTextField = styled(TextField)({[`&.${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]:{边框颜色:绿色"},[`&:hover .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]:{边框颜色:红色"},[`&.${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]:{边框颜色:紫色"},[`&.${outlinedInputClasses.input}`]: {颜色:绿色"},[`&:hover .${outlinedInputClasses.input}`]: {颜色:红色"},[`&.${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.input}`]:{颜色:紫色"},[`&.${inputLabelClasses.outlined}`]:{颜色:绿色"},[`&:hover .${inputLabelClasses.outlined}`]: {颜色:红色"},[`&.${inputLabelClasses.outlined}.${inputLabelClasses.focused}`]:{颜色:紫色"}});功能应用(){返回 (<StyledTextFielddefaultValue=我的默认值"变体=概述"标签=我的标签"/>);}const rootElement = document.getElementById(root");ReactDOM.render( , rootElement);
相关答案:
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
Below is a v4 example (v5 example further down) of how to override the color of the outline, label, and input text on the outlined variant of TextField
. This shows using three different colors: one for the default (green), one for hover (red), and a different one when the input has focus (purple).
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);
Below is a similar example using v5 of MUI. This uses styled
instead of makeStyles
and leverages a more type-safe manner (added in v5) for referencing the global class names (e.g. .${outlinedInputClasses.root}
), but continuing to hard-code the global class names (e.g. .MuiOutlinedInput-root
) still works fine as well (it's simpler syntax when hard-coded, but less protection from typos and no autocomplete help).
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@mui/material/TextField";
import { outlinedInputClasses } from "@mui/material/OutlinedInput";
import { inputLabelClasses } from "@mui/material/InputLabel";
import { styled } from "@mui/material/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);
Related answers:
- Change outline for OutlinedInput with React material-ui
- How do I override hover notchedOutline for OutlinedInput
- Global outlined override
这篇关于更改 Material-UI TextField 上的边框颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!