【问题标题】:How to disable ripple effect on Material UI Input?如何禁用材质 UI 输入的波纹效果?
【发布时间】:2020-06-30 09:05:31
【问题描述】:

如何在 React 的 Material UI 中禁用 TextField 组件的波纹或高亮颜色?

我尝试过覆盖主题:

theme.props.MuiTab.disableRipple = true
theme.props.MuiButton.disableRipple = true
theme.props.MuiButtonBase.disableRipple = true

或添加自定义 CSS:

// disable Ripple Effect
.MuiTouchRipple-root {
display: none;
}

// disable FocusHightlight
.MuiCardActionArea-focusHighlight {
display: none;
}

基于此处提出的问题的建议:https://github.com/mui-org/material-ui/issues/240

有没有办法可以消除焦点时输入的涟漪效应?

【问题讨论】:

    标签: css reactjs material-ui


    【解决方案1】:

    这个解决方案对我有用

    underline: {
      "&:before": {
        borderBottom: `2px solid var(--border)`,
      },
      "&:after": {
        borderBottom: `2px solid var(--border)`,
        transition: 'none',
      },
      "&:hover:not($disabled):not($focused):not($error):before": {
        borderBottom: `2px solid var(--border)`,
      },
    }

    【讨论】:

      【解决方案2】:

      找到了使用withStyles的方法:

      const CustomTextField = withStyles({
        // Override default CSS for input
        root: {
          '& .MuiInput-underline': {
            // Remove the ripple effect on input
            '&:after': {
              borderBottom: 'initial',
            },
          },
        },
      })(TextField);
      
      ...
      
      // Usage
      <CustomTextField />
      

      用于比较不同解决方案与 Button 和 TextField 的 Codesandbox:

      【讨论】:

      • 我不使用 REACT,但您似乎需要在创建主题 Material UI FAQ: How can I disable the ripple effect globally? 时禁用涟漪效果。虽然该示例全局禁用该效果,但您可以指定特定的 prop。 Stackoverflow 上的另一个 SO42211994 示例。
      • @RenevanderLende 我试过了,它适用于按钮、选项卡等,但不适用于输入字段
      • 您的 JS 代码示例没有显示这一点。你真的在定义主题时尝试过吗? (只是确保!)。创建时间和在代码中某处设置...disableRipple = true 之间可能存在明显差异。
      • @RenevanderLende 不用担心!我已经在答案中添加了代码沙箱
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-01-19
      • 1970-01-01
      • 1970-01-01
      • 2018-03-22
      • 1970-01-01
      • 1970-01-01
      • 2021-02-11
      相关资源
      最近更新 更多