我正在将 Material-ui 用于 React。
我正在尝试自定义当用户单击 Mui<TextField>组件时转换到位的下划线的颜色,这是 jss 注入以下 CSS 的结果:
.MuiInput-underline:after {
border-bottom: 2px solid #303f9f;
}
Run Code Online (Sandbox Code Playgroud)
我已经投资于 styled-components 主题提供程序,并且不想引入 MuiTheme 提供程序以使用createMuiTheme和override。
我已经使用 styled-components 来覆盖许多其他 Mui 组件的样式,但无法.MuiInput-underline:after使用 styled-components覆盖。
我现在正在尝试使用 Mui 的 withStyles,但不确定确切的样式语义。我一直没有成功使用 InputProps 和使用类。
const styles = theme => ({
inputProps: {
underline: {
'&:after': {
border: '2px solid red'
}
}
}
});
const MyTextField = props => {
const { classes, ...rest } = props;
return (
<TextField InputProps={{ inputProps: …Run Code Online (Sandbox Code Playgroud) 我正在使用Material-UI Autcomplete组件(免费单人版)并且一切正常,直到我尝试更改文本的颜色(在TextField.
我的代码如下所示:
const moreClasses = {
label: { style: { color: 'blue' } },
input: {
style: {
color: 'red',
borderBottom: `1px solid green`
}
}
};
//...
<Autocomplete
//... classic props as in the official Doc
renderInput={params => <TextField
{...params}
label={'label'}
InputLabelProps={moreClasses.label}
InputProps={moreClasses.input} />
/>
Run Code Online (Sandbox Code Playgroud)
预期行为
当您开始输入时,您可以看到自动完成功能,并且您输入的文本应为红色。
实际行为
文本颜色为红色,但自动完成功能不再起作用。
我创建了这个实时运行示例来说明 3 个组件的问题:
仅文本字段(有效)
使用InputProps(作品)不改变颜色的自动完成
使用更改颜色的自动完成InputProps(不起作用)
笔记
通过设置InputLabelProps自动完成继续工作并更改标签的颜色(在我分享的示例中为蓝色)!所以我无法弄清楚为什么它在设置时不起作用InputProps。
关于这个问题的任何反馈?
我需要在悬停时删除 Material UI Select 列表的下划线。
我试过https://codesandbox.io/s/nifty-rubin-6x9po?file=/src/Dropdown.jsx默认情况下删除下划线但是当悬停时,下划线仍然显示
我提到了如何更改 Material UI 输入下划线颜色?和删除反应材料 ui 组件中自动完成的下划线样式,但都处理了如何显示,我完全想从选择列表中删除下划线。任何帮助表示赞赏,谢谢:)
如何在不使用以下代码的情况下隐藏/删除TextField组件中的下划线:
const theme = createMuiTheme({
overrides: {
MuiInput: {
underline: {
'&:hover:not($disabled):before': {
backgroundColor: 'rgba(0, 188, 212, 0.7)',
},
},
},
},
});
Run Code Online (Sandbox Code Playgroud)
我想用道具并根据文档来做:https://material-ui.com/api/input/
我应该能够改变下划线道具,但它不起作用.
我正在构建一个新组件TextField,我需要为具有readOnlythandisabled属性的文本字段应用相同的样式。
所以,我试图使用该属性,className但它不起作用。
// some logic here ..
<TextField
{...props}
className={readOnly ? 'Mui-disabled' : undefined}
/>
Run Code Online (Sandbox Code Playgroud)
所以,我也尝试使用classsesprop,但我不知道如何从禁用的类中获取当前配置。