代码之家 › 专栏 › 技术社区 › KiwiCoder

如何在不使用muithemeProvider的情况下覆盖MaterialUI文本字段组件的样式?

jss material-ui reactjs

KiwiCoder · 技术社区 · 6 年前

如何隐藏/删除textfield组件中的下划线没有使用以下代码:

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:hover:not($disabled):before': {
          backgroundColor: 'rgba(0, 188, 212, 0.7)',
        },
      },
    },
  },
});

我想用道具,根据文件: https://material-ui.com/api/input/

我应该可以改变下划线道具,但它不起作用。

3 回复 | 直到 6 年前

thirtydot 6 年前

你就是这样做的:

<TextField
    id="name"
    label="Name"
    value={this.state.name}
    margin="normal"
    InputProps={{disableUnderline: true}}
/>

我是怎么想出来的?

您已链接到 Input documentation 它确实有一个 disableUnderline 支柱。

但是,您使用的是 TextField component :

重要的是要理解文本字段是一个简单的以下组件之上的抽象:

窗体控件

输入标签

输入

表单帮助文本

如果您查看可用的道具列表 文本字段 :

inputprops-对象-应用于输入元素的属性。

Jonghee Park 6 年前

我找到了解决这个问题的方法。

<TextField InputProps={{classes: {underline: classes.underline}}} />

const styles = theme => ({
  underline: {
    '&:hover': {
      '&:before': {
        borderBottom: ['rgba(0, 188, 212, 0.7)', '!important'],
      }
    },
    '&:before': {
      borderBottom: 'rgba(0, 188, 212, 0.7)',
    }
  }
})

juank11memphis 6 年前

使用最新版本的Material UI,这是我实现此功能的唯一方法:

<TextField InputProps={{classes: {underline: classes.underline}}} />

const styles = theme => ({
  underline: {
    '&:before': {
      borderBottomColor: colors.white,
    },
    '&:after': {
      borderBottomColor: colors.white,
    },
    '&:hover:before': {
      borderBottomColor: [colors.white, '!important'],
    },
  },
})

推荐文章

ÐÐºÐ°ÑÐµÑÐ¸Ð½Ð° · 我无法更改全局背景材质ui

2 年前

Tanu · 使用三元运算符时获得Lint无嵌套三元错误

2 年前

user460567 · 在react类中,我在哪里可以编写条件语句?

2 年前

Octavian Niculescu · React material ui responsive drawer-我想从工具栏中删除填充

2 年前

ÐÐ°Ð½Ð°Ð¸Ð» ÐÐ¾Ð±ÑÐµÐ² · 从多次页面点击中获取最新页面

2 年前

Germán · 单击提交时,如果文本字段错误匹配,则显示错误提示

2 年前

code4cash · 无法在三值条件下呈现mui图标

2 年前

user8811409 · 材料界面:重建文本域谷歌文档“添加人员”功能

2 年前

Bug Miser · 如何在MUI输入字段上显示不同的错误消息?

2 年前

gjs · 使用材质UI元素的自适应字体大小功能

2 年前