[英]How Do I Style A React Material-UI Required TextField
The documentation says that you can add custom CSS to a TextField. 文档说您可以将自定义CSS添加到TextField。
Eg the second TextField turns purple when you click on it: 例如,当您单击它时,第二个TextField变为紫色:
<TextField
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused,
},
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline,
},
}}
label="Custom CSS"
variant="outlined"
id="custom-css-outlined-input"
/>
How do I make my required TextFields have a highlight all the time (before they are focused) similar to how the Error TextFields are? 如何使我所需的 TextFields始终具有突出显示(在它们聚焦之前),类似于Error TextFields的方式?
I can make the asterisk orange but I can't seem to change the colour of the line : 我可以把星号变成橙色,但我似乎无法改变线条的颜色:
const styles = theme => ({
labelAsterisk: {
color: "orange"
}
});
<TextField
id="name"
label="Name"
required
InputLabelProps={{
FormLabelClasses: {
asterisk: classes.labelAsterisk
}
}}
margin="normal"
/>
EDIT: I can change the colour if I use an outlined TextField. 编辑:如果我使用概述的 TextField,我可以更改颜色。 However, I want to do it for a normal TextField.
但是,我想为普通的TextField做这件事。
const styles = theme => ({
greenOutline: {
borderColor: "green !important"
}
});
<TextField
id="custom-css-outlined-input"
label="Custom CSS"
variant="outlined"
InputProps={{
classes: {
notchedOutline: classes.greenOutline
}
}}
/>
See https://codesandbox.io/s/5yyo503794 for a working example. 有关工作示例,请参阅https://codesandbox.io/s/5yyo503794 。
The key parts were: 关键部分是:
The underline
class in InputProps
InputProps
的underline
类
InputProps={{
classes: {
underline: classes.cssRequired
}
}}
And the &:before
class and the borderBottom
style in the associated css 和
&:before
类和关联的CSS中的borderBottom
样式
cssRequired: {
"&:before": {
borderBottom: "2px solid orange"
}
},
Larger snippet: 更大的片段:
const styles = theme => ({
labelAsterisk: {
color: "red"
},
cssLabel: {
color: "orange"
},
cssRequired: {
"&:before": {
borderBottom: "2px solid orange"
}
},
});
<TextField
id="requiredField"
label="Required Field"
value="Custom Text"
required
InputLabelProps={{
classes: {
root: classes.cssLabel
},
FormLabelClasses: {
asterisk: classes.labelAsterisk
}
}}
InputProps={{
classes: {
underline: classes.cssRequired
}
}}
margin="normal"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.