如何编写Material-UI TextField组件避免背景色超出边框？

我正尝试为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中，此时背景显示正常，但文本及装饰元素不再可见。

问题原因 #

将背景色设置在MuiOutlinedInput-root上时，该元素默认带有内边距，而MuiOutlinedInput-notchedOutline作为子元素的边框容器，两者的层级和padding设置导致背景色超出圆角边框范围。

解决方案 #

调整样式层级，将背景色转移到MuiOutlinedInput-input元素上，同时给外层MuiOutlinedInput-root添加overflow: hidden限制溢出，另外注意修正无效的borderSize属性为borderWidth：

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

内容的提问来源于stack exchange，提问作者Brandon Cruz-Youll