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

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

jss material-ui reactjs

KiwiCoder · 技术社区 · 7 年前

如何隐藏/删除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 回复 | 直到 7 年前

thirtydot 7 年前

你就是这样做的:

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

我是怎么想出来的?

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

但是,您使用的是 TextField component :

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

窗体控件

输入标签

输入

表单帮助文本

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

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

Jonghee Park 7 年前

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

<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 7 年前

使用最新版本的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'],
    },
  },
})

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

2 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

2 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

2 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

2 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

2 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

2 年前