在material-ui-next中,要覆盖浮动标签文本和下划线颜色的TextField,可以通过自定义样式来实现。
首先,可以使用withStyles
函数来创建一个自定义的样式对象。在样式对象中,可以使用'MuiInputLabel-root'
和'MuiInput-underline'
类名来覆盖浮动标签文本和下划线的样式。
下面是一个示例代码:
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const styles = {
root: {
'& .MuiInputLabel-root': {
color: 'red', // 设置浮动标签文本的颜色
},
'& .MuiInput-underline:before': {
borderBottomColor: 'green', // 设置下划线的颜色
},
},
};
function CustomTextField(props) {
const { classes } = props;
return (
<TextField
{...props}
className={classes.root}
/>
);
}
export default withStyles(styles)(CustomTextField);
在上面的代码中,通过styles
对象定义了一个自定义样式对象。在root
属性中,使用'MuiInputLabel-root'
类名来设置浮动标签文本的颜色,使用'MuiInput-underline:before'
类名来设置下划线的颜色。
然后,通过withStyles(styles)
函数将自定义样式应用到CustomTextField
组件上。
最后,在使用CustomTextField
组件时,可以像使用原生的TextField
组件一样,传递相应的属性和值,例如:
<CustomTextField
label="Custom TextField"
variant="outlined"
/>
这样就可以实现覆盖material-ui-next中浮动标签文本和下划线颜色的TextField。
领取专属 10元无门槛券
手把手带您无忧上云