reactjs - 在焦点、反应上更改 Material-UI 文本字段的样式
问题描述
我是第一次学习 Material-UI。我想自定义材质 UI 的 TextField。我可以在未选中文本字段时更改其样式,在聚焦时无法更改其样式。我ThemeProvider
用于将样式注入组件。我试过这段代码
import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import {
createMuiTheme,
makeStyles,
createStyles,
Theme as AugmentedTheme,
ThemeProvider
} from "@material-ui/core/styles";
import { orange, blue, green } from "@material-ui/core/colors";
const useStyles = makeStyles(theme =>
createStyles({
root: {
color: green[900],
"&.Mui-focused": {
border:"2px solid blue",
}
},
})
);
function CustomCheckbox() {
const classes = useStyles();
return (
<TextField
variant='outlined'
classes={{
root:classes.root,
}}
/>
);
}
const theme = createMuiTheme({
});
export default function CustomStyles() {
return (
<ThemeProvider theme={theme}>
<CustomCheckbox />
</ThemeProvider>
);
}
问题:
如何改变 TextField 的焦点样式?帮助将不胜感激
解决方案
实际上,您可能想要的是设置 className 的InputProps
:
<TextField variant="outlined" InputProps={{ className: classes.root }} />
如果您还想删除字段集的边框(或仅控制该边框),您可以使用以下命令进行设置:
const useStyles = makeStyles(theme =>
createStyles({
root: {
color: green[900],
"&.Mui-focused": {
border: "2px solid red",
'& .MuiOutlinedInput-notchedOutline': {
border: 'none'
}
}
}
})
);
您可以在此处找到一个工作示例:检查以下内容:https ://codesandbox.io/s/style-text-field-htbem?file=/src/App.js
您可以在此处找到有关 MUI 与 Input 组件一起使用的不同类的更多信息:https ://material-ui.com/api/input/#css
推荐阅读
- c - 如何为用户输入的候选者数量创建一个变量
- excel - 使用新的 Excel 排序功能。仅返回匹配结果的数组
- css - 如何在 React 中的按钮下制作图像框
- laravel - Laravel尝试访问null类型值的数组偏移量
- sql - 如何动态更改sql查询以添加周数?
- python - 如何在python中反转多索引数据透视表
- html - 为什么我不能使用“背景图像”属性放置背景图像?
- javascript - 如何从 if-else 语句中调用函数?
- mysql - Mysql索引表的列
- jupyter-notebook - 如何使用 if 和 else 选项在 Markdown 中编写函数