[英]In Material UI, how can I change the border color of the TextField only after the user enters text?
Given a TextField
, is there a way I can detect that it has text input, and then style the border only on that condition?给定一个
TextField
,有没有一种方法可以检测到它有文本输入,然后仅在该条件下设置边框样式?
I'm using the outlined TextField
.我正在使用概述的
TextField
。 It has placeholder text when empty.为空时它有占位符文本。
<TextField variant="outlined" />
Currently I've only succeeded in changing the text input color when it's filled by detecting if there's placeholder text currently visible.目前,我只通过检测当前是否有占位符文本来成功更改文本输入颜色。
In my overrides:在我的覆盖中:
MuiOutlinedInput: {
root: {
'& $notchedOutline': {
borderColor: 'green', // default colour, want to change this when field has input
},
},
input: {
'&:not(:placeholder-shown)': {
color: 'red', // input field text becomes red when input is provided
},
},
},
I want the border to also become red here when the user enters text.当用户输入文本时,我希望边框在这里也变成红色。 I can't get the placeholder trick to work on changing the border color because the border by default is on the
<fieldset>
not the <input>
.我无法使用占位符技巧来更改边框颜色,因为默认情况下边框位于
<fieldset>
而不是<input>
上。 Does anyone have any ideas?有人有什么想法吗?
Because CSS has no pseudo selector to detect whether input is empty or not ( this question ), so you must programmatically detect input and override the TextField border color因为 CSS 没有伪选择器来检测输入是否为空( 这个问题),所以你必须以编程方式检测输入并覆盖 TextField 边框颜色
<TextField
id="fullName"
placeholder="Full name"
variant="outlined"
value={this.state.inputValue}
onChange={(e) => this.setState({ inputValue: e.target.value })}
InputProps={{
classes: {
notchedOutline: this.state.inputValue && classes.greenBorder
}
}}
/>
Codesandbox for demo用于演示的 Codesandbox
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.