时间戳

首页 > 解决方案 > 试图使 OutlinedInput 具有透明边框，但得到奇怪的伪影

css - 试图使 OutlinedInput 具有透明边框，但得到奇怪的伪影

问题描述

在此处输入图像描述

尝试创建带有透明边框的轮廓变体 TextField select。我拥有的当前主题覆盖如下：

overrides: {
    MuiOutlinedInput: {
      root: {
        backgroundColor: '#F4F4F4',
        borderRadius: 8,
        height: 56
      },
      notchedOutline: {
        borderColor: 'transparent !important',
        borderRadius: 8,
        borderWidth: '0px !important'
      }
    }
  }

However, as seen in the picture, you can see in the picture, there's a weird block artifact around the borders whenever the select is focused.

在此处输入图像描述

我只希望它看起来像这张照片中的样子，但是一旦聚焦，它就会从顶部照片中接收到那些奇怪的边缘。有什么帮助吗？

标签： cssmaterial-uijss

解决方案

我最近也一直在玩覆盖。材质组件通常与其他材质组件一起构建，因此您可能必须提供对除MUIOutlinedInput.

您可能需要自定义MuiInput和/或MuiInputBase.

或者，如果您不想覆盖所有这些，您可以创建一个自定义样式对象并将其注入到该组件中使用withStyles或useStyles

推荐阅读