javascript - 在反应/材料 ui 中更改 TextField 颜色
问题描述
我有一个带有文本字段和按钮的反应组件。我希望它们在黑色背景上显示为绿色,并且我无法更改所有元素的默认颜色。基于这个问题:如何更改 Material UI React 输入组件的轮廓颜色?; 我能够更改轮廓和标签颜色。但是我找不到任何方法来更改用户输入的文本的颜色。我想我必须覆盖另一个属性,但我没有找到哪个。
提前感谢您帮助我。
问候
代码 App.js :
import TestComponent from './TestComponent.js'
import {ThemeProvider } from '@material-ui/core/styles';
import theme from './Theme.js'
function App() {
return (
<ThemeProvider theme={theme}>
<div>
<TestComponent/>
</div>
</ThemeProvider>
);
}
export default App;
来自 Theme.js 的代码
const Theme = createMuiTheme({
palette: {
primary: {
main: '#2EFF22',
},
secondary: { main: '#22BF19' },
grey: { main: '#22BF19' }
},
overrides: {
MuiOutlinedInput: {
root: {
position: 'relative',
'& $notchedOutline': {
borderColor: '#2EFF22',
},
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
borderColor: '#2EFF22',
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
borderColor: '#2EFF22',
},
},
'&$focused $notchedOutline': {
borderColor: '#2EFF22',
borderWidth: 1,
},
},
},
MuiFormLabel: {
root: {
'&$focused': {
color: '#2EFF22'
}
}
}
}
})
export default Theme
来自 TestComponent 的代码
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
class TestComponent extends Component {
constructor(props) {
super(props)
}
render () {
return (
<div style={{ display: 'flex', flexDirection: 'column', backgroundColor:'black' }}>
<TextField id="Password" variant="outlined" required label="Password" style={{width:'150px', margin:'20px'}}/>
<Button style={{width:'150px', margin:'20px'}} color="primary" variant="contained" onClick={() => console.log('OK')}>
OK
</Button>
</div>
);
}
}
export default TestComponent
解决方案
只需添加一个简单的 HOC withStyles
。
import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
root: {
background: "black"
},
input: {
color: "#2EFF22"
}
};
class TestComponent extends React.Component {
render() {
const { classes } = this.props;
return (
<div
style={{
display: "flex",
flexDirection: "column",
backgroundColor: "black"
}}
>
<TextField
id="Password"
variant="outlined"
required
label="Password"
InputProps={{
className: classes.input
}}
style={{ width: "150px", margin: "20px" }}
/>
<Button
style={{ width: "150px", margin: "20px" }}
color="primary"
variant="contained"
onClick={() => console.log("OK")}
>
OK
</Button>
</div>
);
}
}
export default withStyles(styles)(TestComponent);
给你,工作链接:https ://codesandbox.io/s/wizardly-river-gd4d2
(请注意,因为您正在使用 a ,它是其他组件(如、等)<TextField>
之上的抽象,所以您不能直接将样式传递给;您必须使用。有关详细信息,请参阅 MUI API 。 )<FormControl>
<InputLabel>
<TextField>
<InputProps>
<TextField>
推荐阅读
- c++ - boost::beast ws_.async_handshake 在同步函数工作时中断
- azure - 如何在 Azure API 管理中为查询字符串参数指定重写 url
- java - 我应该总是使用 requestFocusInWindow() 而不是 requestFocus() 吗?
- scala - 压缩操作后映射和压缩后映射有什么区别?
- c++ - 有时课程必须“默认复制c'tor”?当我做“新类型[..]”时会发生什么?
- vba - 无法在 Visio VBA 组中粘合形状
- ios - CloudKit,无法修改某些记录 - 未找到区域
- c# - Process.Start() 使应用程序不响应来自 Windows 资源管理器的文件打开事件
- html - 使用 float 将元素放置在 CSS 的右侧
- r - R将字符列表转换为具有空值的矩阵