reactjs - 更改 Material-UI TextField 上的边框颜色
问题描述
这应该很简单,但由于某种原因,我无法弄清楚如何更改 TextField 上的边框颜色
<TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" />
它基本上只是从文档中复制的,轮廓上的轮廓是白色的,所以我无法弄清楚到底是什么搞砸了。
我试图在 jsfiddle 或其他东西上重现,但找不到可以让我导入 TextField 模块的东西
解决方案
下面是一个 v4 示例(下方的 v5 示例),说明如何覆盖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"
},
"& .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);
下面是一个使用 MUI v5 的类似示例。这使用styled
而不是makeStyles
并利用更类型安全的方式(在 v5 中添加)来引用全局类名(例如.${outlinedInputClasses.root}
),但继续硬编码全局类名(例如.MuiOutlinedInput-root
)仍然可以正常工作(当硬编码,但对拼写错误的保护较少,也没有自动完成帮助)。
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);
相关答案:
推荐阅读
- php - 您如何将 XMLHttpRequest 与 POST 方法一起使用?
- java - 发送 SIGTERM 时,VM_Exit 是如何传递给 VM 线程的,由谁来传递?
- json - 如何在 Postgres 中选择一列 json 对象,以便返回的行是 json 数组?
- create-react-app - 如何使用 Yarn 工作区在 CRA 中导入通用模块?
- java - 如何将 URL 图像设置为 AR Core Augmented Image?
- javascript - 如何在iMacros中使用XPCOM加载数据和写入数据
- android - 如何在附加图像上显示的 Android Firebase 中创建尺寸选项
- python - 在损失函数中点张量时不存在 pytorch 梯度
- java - 使用 Spring 访问共享配置对象
- firefox - Firefox 67 browser.downloads.download(...) cookie 数据丢失