如何去除边框并为概述的 MUI TextField 变体添加背景颜色

Question

我想在 Material UI 中自定义 TextField 的轮廓变体，我想在下面的字段中删除边框或将颜色设置为白色并设置不同的背景颜色。我在我的应用程序中使用样式化组件，但也尝试过 makeStyles 但它没有用，尽管当我在 chrome 开发工具中进行更改时我能够这样做。我已经从文档 .MuiTextField-root 中尝试了这个 class 但它没有用。我 chrome 开发工具适用于此 class 但是当我将此 class 添加到样式化组件时（没有此 .css-wacwkt-）它不起作用。 element.style 也是一样的情况。

要与边框交互，我需要在 chrome 开发工具字段集选择器中使用，它适用于 element.style 并且标记为 class。你可以在左边看到 border-color:blue 它是关于哪个 TextFields

代码是这样实现的

 <StyledInputSection>
                        <StyledDataHeader>
                            {contactDataTxt}
                        </StyledDataHeader>
                        <InputForm
                            name={'phoneNumber'}
                            id={'phoneNumber'}
                            label={phoneNumberLabelTxt}
                            disabled={isDisabledInputs}
                        />
                        <InputForm
                            name={'email'}
                            id={'email'}
                            label={emailLabelTxt}
                            disabled={isDisabledInputs}
                        />
                        {/* Show checkbox only for create new user by Admin */}
                        {!isDetailsView && !idUser && (
                            <CheckboxForm
                                label={emailAsLoginTxt}
                                name={'isEmailAsLogin'}
                                disabled={isDisabledInputs}
                            />
                        )}

                        <InputForm
                            name={'userName'}
                            id={'userName'}
                            label={loginLabelTxt}
                            disabled={
                                isDisabledLoginInput || isDisabledInputs
                            }
                        />
                    </StyledInputSection>

InputForm 是准备可重复使用的 TextFiled 组件。

感谢您的支持。

问候

Answer 1

更新的组件示例：

您可以通过挂接到现有的类:

来覆盖默认样式作为 styled 组件

const ExampleTextField = styled(TextField)({
  backgroundColor: "#eee",
  "& .MuiOutlinedInput-notchedOutline": {
    border: "none"
  },
  "&.Mui-focused": {
    "& .MuiOutlinedInput-notchedOutline": {
      border: "none"
    }
  }
});

工作组件代码示例：https://codesandbox.io/s/customizedinputs-material-demo-forked-lpxwb?file=/demo.js:166-403

原始主题示例：

如果您可以将其添加到主题中，那么简单的方法可能适合您：

（如果您不想影响每个 outlined 变体，您也可以在 InputForm 中对样式组件执行类似的操作。）

const theme = createTheme({
  components: {
    // Inputs
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          backgroundColor: "#eee", // As an example color
          "& .MuiOutlinedInput-notchedOutline": {
            border: "none"
          },
          "&.Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              border: "none"
            }
          }
        }
      }
    }
  }
});

工作主题代码示例：https://codesandbox.io/s/customstyles-material-demo-forked-u644m?file=/theme.js

如何去除边框并为概述的 MUI TextField 变体添加背景颜色

How to get rid of border and add background color to MUI TextField variant outlined

reactjs

material-ui

styled-components