Question

如何使用以下代码隐藏/删除TextField组件中的下划线不带：

CREATE TABLE Table1
    ([Record] int, [Customer] varchar(5), [Date] datetime)
;

INSERT INTO Table1
    ([Record], [Customer], [Date])
VALUES
    (1, 'Tom', '2018-06-26 00:00:00'),
    (2, 'Carly', '2018-07-01 00:00:00'),
    (3, 'Jeff', '2018-07-01 00:00:00'),
    (4, 'Jeff', '2018-07-20 00:00:00'),
    (5, 'Jeff', '2018-07-23 00:00:00'),
    (6, 'Tom', '2018-08-03 00:00:00')
;

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

来做

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

Answer 1

您就是这样做的：

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

我是如何理解的？

您已链接到Input documentation，确实有disableUnderline道具。

但是，您使用的是TextField component：

理解文本字段很简单很重要   在以下组件之上进行抽象：


FormControl

InputLabel

输入

FormHelperText

如果查看TextField的可用道具列表：

InputProps - object - 应用于Input元素的属性。

Answer 2

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

<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)',
    }
  }
})

Answer 3

使用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'],
    },
  },
})

Answer 4

好吧，如果你想使用 scss 有一个方法，

在您的全局样式中添加此代码片段。

  .MuiInput-underline {
    &:before,
    &:after {
      border-bottom: none !important;
    }
  }

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

4 个答案: