文章/答案/技术大牛

发布

社区首页 >问答首页 >如何去掉边框并为MUI TextField变体添加背景颜色

问如何去掉边框并为MUI TextField变体添加背景颜色
EN

Stack Overflow用户

提问于 2022-02-07 20:29:25

回答 1查看 2.1K关注 0票数 1

我想要自定义TextField的概述变体在材料UI和下面的字段，我想删除边框或给白色和给予不同的背景颜色。我在我的应用程序中使用样式化的组件，但也尝试过makeStyles，但它没有工作，尽管当我在chrome开发工具中进行更改时，我能够做到这一点。我从文档..MuiTextField root中尝试过这个类，但是它没有工作。我为这个类使用了chrome开发工具，但是当我将这个类添加到样式组件(没有这个..css wacwkt-)时，它就不能工作。对于element.style来说，情况是一样的。

要与边框交互，我需要在chromedev工具中使用字段集选择器，它适用于element.style和这个标记的类。你可以看到左边有边框的颜色:蓝色是关于哪个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组件准备的.

感谢你的支持。

问候

reactjs

material-ui

styled-components

Stack Overflow用户

回答已采纳

发布于 2022-02-07 20:52:29

更新组件示例：

可以通过链接到现有类来覆盖默认样式为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

原始主题示例：

如果您可以将它添加到主题中，那么像这样简单的内容可能会适用于您：

(如果不希望使用样式组件来影响每个InputForm变体，也可以在outlined中执行类似的操作。)

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

票数 2

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71024987

复制

相似问题

问如何去掉边框并为MUI TextField变体添加背景颜色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何去掉边框并为MUI TextField变体添加背景颜色EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何去掉边框并为MUI TextField变体添加背景颜色
EN