如何编写 Material-UI TextField 组件以使背景颜色不会溢出边框？

Question

我一直在尝试设计 Material-UI

TextField

的样式，以便在用户悬停或组件聚焦时具有

background-color

。

我的组件代码是：

import React from "react";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { styled } from "@mui/material/styles";
import { Input, InputBase, InputBaseProps } from "@mui/material";

export const SearchBar = styled(TextField)<TextFieldProps>(({ theme }) => ({
  "& .MuiOutlinedInput-root": {
    color: "var(--grey-30)",
    marginRight: "10px",
    "& .MuiOutlinedInput-notchedOutline": {
      borderRadius: "30px",
      borderColor: "var(--primary)",
      borderSize: "1px",
      height: "56px",
      color: "var(--primary)",
    },
    "&:hover:not(.Mui-focused)": {
      color: "var(--grey-30)",
      borderColor: "var(--primary)",
      backgroundColor: "var(--primary-99)",
      borderRadius: "30px",
    },
    "&.Mui-focused": {
      color: "var(--primary)",
      backgroundColor: "var(--primary-99)",
      borderRadius: "30px",
      borderColor: "var(--primary)",
      "& .MuiInputAdornment-outlined": {
        color: "var(--primary)",
      },
    },
  },
}));

我的组件代码实例如下图所示：

              <SearchBar
                id="search-input"
                placeholder="Search"
                type="search"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start" color="var(--primary)">
                      <SearchIcon />
                    </InputAdornment>
                  ),
                }}
                value={searchParam}
                onChange={onSearch}
              />

文本字段的图像，样式为搜索栏，背景颜色超出边框

我到处搜索，但没有找到解决这个特定问题的帖子。 任何建议将不胜感激。

我尝试过不使用

"& .MuiOutlinedInput-notchedOutline"

，但这没有用。 我尝试将

notchedOutline

添加到

hover

和

.MuiFocused

。这使得背景显示正确，但文本不再可见（以及装饰）。

Answer 1

我已经复制了您的代码并实现了您想要实现的目标。显然，

& .MuiOutlinedInput-notchedOutline

或

fieldset

是绝对显示的，但背景是透明的。但是，当您将背景颜色添加到

fieldset

时，背景会覆盖

Textfield

输入值。为了避免这种情况，每当输入悬停或聚焦时，我都会向

.MuiOutlinedInput-input

添加 z 索引，以便它始终显示在

fieldset

的顶部。我没有从您现有的代码中删除任何内容，但我已经添加了可能的解决方案。我在输入焦点和悬停时使用了任意颜色，因此您也可以相应地调整颜色。

import React from "react";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { styled } from "@mui/material/styles";
import { Input, InputBase, InputBaseProps } from "@mui/material";

export const SearchBar = styled(TextField)<TextFieldProps>(({ theme }) => ({
  "& .MuiOutlinedInput-root": {
    color: "var(--grey-30)",
    marginRight: "10px",
    "& .MuiOutlinedInput-notchedOutline": {
      borderRadius: "30px",
      borderColor: "var(--primary)",
      borderSize: "1px",
      height: "56px",
      color: "var(--primary)",
    },
    "&:hover:not(.Mui-focused)": {
      color: "var(--grey-30)",
      borderColor: "var(--primary)",
      backgroundColor: "var(--primary-99)",
      borderRadius: "30px",
    },
    "&.Mui-focused": {
      color: "var(--primary)",
      backgroundColor: "var(--primary-99)",
      borderRadius: "30px",
      borderColor: "var(--primary)",
      "& .MuiInputAdornment-outlined": {
        color: "var(--primary)",
      },

      "& > fieldset": {
        background: "red",
      },
      "& .MuiOutlinedInput-input": {
        zIndex: 10,
      },
    },

    "&:hover": {
      "& > fieldset": {
        background: "green",
      },
      "& > .MuiOutlinedInput-input": {
        zIndex: 10,
      },
    },
  },
}));