【问题标题】:how to remove green color from input field in react?如何在反应中从输入字段中删除绿色?
【发布时间】:2019-02-10 01:03:20
【问题描述】:

您能告诉我如何在反应中从输入字段中删除绿色吗?我知道它来自主题,我只想删除此表单 inputselect 字段。

Codesandbox

const theme = createMuiTheme({
  palette: {
    primary: green,
    secondary: green
  },
  overrides: {
    MuiInput: {
      underline: {
        color: "red",
        "&:hover:not($disabled):after": {},
        "&:hover:not($disabled):before": {}
      }
    }
  }
});

【问题讨论】:

  • material-ui.com/api/input-label 你必须覆盖样式。
  • 能否请您更改我的沙盒链接
  • 有什么更新吗?你能帮帮我吗
  • 我不知道该怎么做,因为我不熟悉图书馆。我给了你方向的链接。抱歉,我不能提供更多帮助。
  • 好的..感谢您的帮助

标签: reactjs react-redux material-design material-ui


【解决方案1】:

我已经分叉了您的代码示例并在主题覆盖中进行了编辑以更改表单标签https://codesandbox.io/s/j3763x65y3 的颜色。

test.js 文件中,我编辑了以下内容:

在样式下:

  noUnderline: {
    color: "grey",
    "&:after": {
      borderColor: "grey",
      color: "grey"
    },
  }

并作为相应 TextField 的属性:

<TextField
          InputLabelProps={{
            shrink: true,
            focused: false
          }}
          InputProps={{
            classes: {
              focused: classes.noUnderline,
              underline: classes.noUnderline
            }
          }}
</TextField>

我没有很快找到合适的类属性来改变 InputLabel 的焦点颜色,所以我只是用 focused: false 禁用了焦点,虽然这不是一个非常优雅的解决方案,我不会在生产中使用它。

由于 TextField 组件是由其他组件组成的组件,请查看组件 https://material-ui.com/api/text-field/ 及其组成的组件的 API 文档。

【讨论】:

    猜你喜欢
    • 2023-03-14
    • 2019-06-09
    • 2011-12-12
    • 1970-01-01
    • 1970-01-01
    • 2014-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多