时间戳

首页 > 解决方案 > 样式化 Muitextfield 输入背景，隐藏标签

javascript - 样式化 Muitextfield 输入背景，隐藏标签

问题描述

我正在尝试从全局主题中设置 Textfield 的样式，但是，我无法设法仅为输入设置彩色背景（白色），而在标签在输入内部移动时不隐藏标签。

我想要这个结果： 在此处输入图像描述

但是，我有这个：在此处输入图像描述 我将白色背景设置为透明，以表明文本确实在它后面，但是，如果我将透明度设置为不透明，标签将完全隐藏在白色背景后面，如下所示：在此处输入图像描述

这是我的主题：


export const testGlobal = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "rgba(255, 255, 255, 1)",

      blue: {
        light: "rgba(184, 244, 255, 1)",
        default: "rgba(0, 219, 255, 1)",
        dark: "rgba(0, 184, 213, 1)",
      },
      red: {
        light: "#ff1744",
        default: "#fd0031",
        dark: "#e3002c",
      },
      orange: {
        light: "#ffc046",
        default: "#ff8f00",
        dark: "#c56000",
      },
      grey: {
        light: "rgba(99, 99, 99, 1)",
        medium: "rgba(99, 99, 99, 1)",
        paper: "rgba(65, 65, 65, 1)",
        default: "rgba(99, 99, 99, 1)",
        dark: "rgba(60, 60, 60, 1)",
      },
    },
  },
});

testGlobal.root = {
  borderColor: "rgba(85, 85, 85, 1)",
};
testGlobal.img = {
  width: "79%",
};
testGlobal.palette = {
  ...testGlobal.palette,
  vumeter: {
    top: "#fd0031",
    mid: "#ff8f00",
    bottom: "rgba(0, 219, 255, 1)",
  },
  playlist: {
    playing: "#ef5350",
  },
  background: {
    light: "rgba(99, 99, 99, 1)",
    medium: "rgba(99, 99, 99, 1)",
    paper: "rgba(65, 65, 65, 1)",
    default: "rgba(99, 99, 99, 1)",
    dark: "rgba(60, 60, 60, 1)",
  },
  primary: {
    light: "rgba(184, 244, 255, 1)",
    main: "rgba(0, 219, 255, 1)",
    dark: "rgba(0, 184, 213, 1)",
    contrastText: "rgba(255, 255, 255, 1)",
  },
  text: {
    primary: "rgba(255, 255, 255, 0.87)",
    secondary: "rgba(255, 255, 255, 0.54)",
    disabled: "rgba(255, 255, 255, 0.38)",
    hint: "rgba(255, 255, 255, 0.38)",
  },
};
testGlobal.overrides = {
  MuiFormLabel: {
    root: {
      background: "black",
      fontWeight: "bolder",
      color: "grey",
      "&.Mui-focused": { color: "grey" },
      paddingLeft: theme.spacing(1),
    },
  },
  MuiInput: {
    root: {
      fontWeight: "bolder",
      background: "white", // the white background that keep hiding my label :(
      padding: theme.spacing(1),
      color: "black",
    },

  },
};

testGlobal.props = {
  MuiInput: { disableUnderline: true },
};

我没有向文本字段组件添加其他样式

为什么背景会出现在标签之上？:(

标签： javascriptcssreactjsmaterial-ui

解决方案

如果您可以在 JavaScript 操场网站（例如codesandbox.io ）上共享一个工作代码链接会很有帮助，但这听起来可能是个z-index问题。尝试添加诸如position: relative;z-index: 99;标签之类的东西。z-index控制页面上的重叠顺序，因此这应该可以工作。

推荐阅读