相关疑难解决方法(0)

如何自定义material-ui TextField Input underline:after?

我正在将 Material-ui 用于 React。

我正在尝试自定义当用户单击 Mui<TextField>组件时转换到位的下划线的颜色,这是 jss 注入以下 CSS 的结果:

.MuiInput-underline:after {
    border-bottom: 2px solid #303f9f;
}
Run Code Online (Sandbox Code Playgroud)

我已经投资于 styled-components 主题提供程序,并且不想引入 MuiTheme 提供程序以使用createMuiThemeoverride

我已经使用 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)

reactjs material-ui

5
推荐指数
2
解决办法
5887
查看次数

设置 TextField InputProps 时,Material-UI 自动完成不起作用

我正在使用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

关于这个问题的任何反馈?

reactjs material-ui

5
推荐指数
1
解决办法
2210
查看次数

如何去除material-ui select的下划线?

我需要在悬停时删除 Material UI Select 列表的下划线。

我试过https://codesandbox.io/s/nifty-rubin-6x9po?file=/src/Dropdown.jsx默认情况下删除下划线但是当悬停时,下划线仍然显示

我提到了如何更改 Material UI 输入下划线颜色?删除反应材料 ui 组件中自动完成的下划线样式,但都处理了如何显示,我完全想从选择列表中删除下划线。任何帮助表示赞赏,谢谢:)

reactjs material-ui

4
推荐指数
2
解决办法
2611
查看次数

如何在不使用MUIThemeProvider的情况下覆盖material-ui TextField组件的样式?

如何在使用以下代码的情况下隐藏/删除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/

我应该能够改变下划线道具,但它不起作用.

reactjs material-ui jss

3
推荐指数
2
解决办法
7845
查看次数

ReactJS material-ui 使用类 `Mui-disabled` 作为只读组件

我正在构建一个新组件TextField,我需要为具有readOnlythandisabled属性的文本字段应用相同的样式。

所以,我试图使用该属性,className但它不起作用。

// some logic here ..

<TextField
    {...props}
    className={readOnly ? 'Mui-disabled' : undefined}
 />
Run Code Online (Sandbox Code Playgroud)

所以,我也尝试使用classsesprop,但我不知道如何从禁用的类中获取当前配置。

reactjs material-ui

3
推荐指数
1
解决办法
5996
查看次数

标签 统计

material-ui ×5

reactjs ×5

jss ×1