How to code a Material-UI TextField component so the background-color does not overflow the border?

I have been attempting to style a Material-UI TextField to have a background-color when a user hovers or the component is focused.

My component code is:

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)",
      },
    },
  },
}));

And my instance of the component code as pictured below is:

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

Image of TextField styled as a Search Bar with background-color overshooting the border

I have searched everywhere but have not come across a post addressing this particular issue. Any advice would be appreciated.

I have tried not using "& .MuiOutlinedInput-notchedOutline" but that did not work. I tried adding the notchedOutline to the hover and .MuiFocused. That made the background appear correctly, but the text was no longer visible (as well as the adornment).

I have reproduced your code and implemented what you were trying to achieve. Apparently, the & .MuiOutlinedInput-notchedOutline or fieldset is displayed absolutely but with a transparent background. However, when you added the background color to the fieldset, the background covers the Textfield input value. In order to circumvent this, I added a z-index to the .MuiOutlinedInput-input whenever the input is hovered or focused so it can always display on top of the fieldset. I haven't removed anything from your existing code, but I have added the possible solutions to it. I have used arbitrary colors on input focus and on hover, so you can adjust the color accordingly too.

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,
      },
    },
  },
}));