如何刪除材料ui中文本字段字段集中的邊框

Question

我需要刪除邊框。 我從堆棧溢出中使用了一些 css，但問題尚未解決。 如果有人請幫我解決這個問題。我將非常感謝。

我寫什么 css 去掉邊框。

 <TextField variant="outlined" margin="normal" required fullWidth id="phoneNumber" disableUnderline={false} // label="Phone Number" name="phoneNumber" autoComplete="phoneNumber" autoFocus onChange={handlePhoneNumberChange} className={classes.textField} placeholder="Phone Number" InputProps={{ startAdornment: ( <InputAdornment position="start"> <AccountCircle /> </InputAdornment> ), }} />

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

Answer 1

我正在尋找一個無邊界的文本字段，這對我有用......

<TextField
  variant="standard" // <== changed this
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: <AccountCircle />, // <== adjusted this
    disableUnderline: true, // <== added this
  }}
/>

這2個道具似乎是關鍵......

variant="standard"
 InputProps={{
        disableUnderline: true,
      }}

Answer 2

InputProps可以傳遞給樣式輸入的變體。 對於outlined的輸入，有一個名為.MuiOutlinedInput-notchedOutline ，它在這個問題的情況下設置了邊界。 要修改此 class，請將 styles 傳遞給 InputProps 中的notchedOutline InputProps 。

const useStyles = makeStyles(() => ({
  noBorder: {
    border: "none",
  },
}));

const TextInput = props => {
  const { onChange, type} = props;
  const classes = useStyles();

  return (
    <TextField
      variant="outlined"
      margin="normal"
      required
      fullWidth
      id="phoneNumber"
      disableUnderline={false}
      // label="Phone Number"
      name="phoneNumber"
      autoComplete="phoneNumber"
      autoFocus
      classes={{notchedOutline:classes.input}}

      // onChange={handlePhoneNumberChange}
      className={classes.textField}
      placeholder="Phone Number"
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        ),
        classes:{notchedOutline:classes.noBorder}
      }}
    />
  );
};

這是工作沙箱鏈接： https://codesandbox.io/s/material-demo-forked-nhlde

Answer 3

在您的 textField 樣式中添加outline: 'none'

Answer 4

我在這里嘗試了所有答案。

不工作

我發現這個InputBase非常好用。 這正是您應該使用的。

他們也提供了沙箱Sandbox InputBase

Answer 5

截至 2022 年，如果您使用 MUI >= 版本 5，您可以在此處使用一些解決方案，目前文檔中沒有關於如何在 Textfield 中執行此操作的位置。

MUI 提供的另一個不錯的組件是 Input，幸運的是，它接受幾乎所有傳遞給 Textfield 的道具，您可以在其中執行 disableUnderline={false} 並且它會按預期工作。

    <Input
      disableUnderline={true}
      variant="standard"
      autoFocus
      onChange={yourChangeHandler}
      value={value}
      placeholder="Title"
      fullWidth
    />

Answer 6

對於大綱文本字段

如果要從帶輪廓的文本字段中刪除輪廓。 然后將其添加到您的 TextField

 sx={{border: 'none',"& fieldset": { border: 'none' },}}

這是您的代碼...

 <TextField
  variant="outlined"
  sx={{border: 'none', "& fieldset": { border: 'none' },}}
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  disableUnderline={false}
  // label="Phone Number"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  className={classes.textField}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    ),
  }}
/>

對於標准文本字段

如果要從標准文本字段中刪除下划線。 然后將其添加到您的 TextField

InputProps={{ disableUnderline: true }}

這是代碼

<TextField
 fullWidth
 placeholder="Search..."
 InputProps={{ disableUnderline: true }}
/>

Answer 7

最后，以下 css 工作（2022）

  '& .MuiInput-root': {
    '&:before, :after, :hover:not(.Mui-disabled):before': {
      borderBottom: 0,
    },
  },

Answer 8

嘗試覆蓋樣式

請參閱下面的示例

Answer 9

禁用下划線
如果為真，輸入將沒有下划線。

<Input
            variant="standard"
            disableUnderline={true}
            required
            color="info"
            fullWidth
            margin="dense"
            focused
          />

API

Answer 10

在 TextField 中添加了具有以下屬性的 sx 道具，它對我來說效果很好

 <TextField
      sx={{
        input: {
          border: "none",
        },
        "::placeholder": { color: "white" },
      }}
 
    />

Answer 11

只需添加

".MuiOutlinedInput-notchedOutline": { border: "none" },

到 sx 道具。

這適用於 MUI Select 和 Textfield

Answer 12

該文檔沒有提供任何好的方法來做到這一點
所以你可以 select 該元素的Mui選擇器並直接修改它
這對我有用。 您可以覆蓋 css

<TextField
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  sx={{ "& .MuiOutlinedInput-notchedOutline": { border: "none" } }}
 />
     
<TextField
   id="filled-basic"
   label="Filled"
   variant="filled"
   sx={{
          "& .MuiFilledInput-underline:before": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:after": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:hover:not(.Mui-disabled):before": {
            borderBottom: "none",
          },
        }}
 />

https://codesandbox.io/s/fancy-shadow-515yoi?file=/src/App.js

Answer 13

在 MUI 5 中刪除 TextField 字段集中的邊框，

只需添加以下內容。

    sx={{
      "& fieldset": { border: 'none' },
    }}

Answer 14

如果您想刪除所有 MuiOutlinedInput 組件的邊框，請將其添加到您的主題components object：

export const theme = createTheme({
  // ...
  components: {
    // ...
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          border: 'none',
        },
      },
    },
  },
})