MUI React 删除焦点上的轮廓边框

Question

我一直在尝试将 2 个 MUI 输入放在同一标签下以创建自定义字段。我通过将字段作为 div 包装在另一个 TextField 中找到了解决方案，但这会对边框产生一些不良影响。

我现在的字段看起来像这样，这是完美的。

当我突出显示文本字段时，边框是正确的：

但是当我突出显示选择字段时，我得到以下信息：

如您所见，当选择焦点时，两个 TextField 周围的边框在不应该可见的情况下可见。

任何人都可以帮忙解决当选择字段聚焦时如何隐藏文本字段周围的边框吗？

CodeSandbox 链接

Answer 1

import { MenuItem, Select, TextField } from "@mui/material";
import React from "react";
import OutlinedDiv from "../components/OutlinedDiv";

export default function App() {
  const intervalOptions = [
    { label: "Day(s)", value: "days" },
    { label: "Week(s)", value: "weeks" },
    { label: "Month(s)", value: "months" },
    { label: "Year(s)", value: "years" },
  ];

  return (
    <OutlinedDiv label="Interval">
      <TextField
        name="frequencyNumber"
        label={null}
        type="number"
        defaultValue={1}
        sx={{
          width: "30%",
          "& fieldset": { border: 0 },
          "& .MuiOutlinedInput-root": {
            border: "none",
            "&.Mui-focused fieldset": {
              border: "none",
            },
          },
        }}
      />
      <Select
        name="frequencyName"
        label={null}
        defaultValue="days"
        fullWidth
        sx={{
          width: "70%",
          "& .MuiOutlinedInput-notchedOutline": {
            border: "none", // Adjust border styling as needed
          },
          "& .MuiOutlinedInput-root": {
            "& .Mui-focused fieldset": {
              border: "none", // Adjust border styling as needed
              boxShadow: "none",
            },
          },
        }}
      >
        {intervalOptions.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </OutlinedDiv>
  );
}

说明：

对于 TextField，我使用 & fieldset、& .MuiOutlinedInput-root 来定位 fieldset 和根元素，以立即删除它们的边框。然后，&.Mui-focused fieldset确保聚焦时不会出现边框。

对于选择，我使用类似的方法来删除边框，同时针对凹口轮廓和聚焦字段集。然后我在聚焦时移除了盒子阴影。