如何在材质ui的textfield fieldset中删除边框

问题描述

我需要删除边框.我从堆栈溢出中使用了一些CSS，但是问题尚未解决.如果有任何人请帮助我解决此问题.我将非常感谢.

I need to remove the border. I used some css from stack overflow but the issue is not fixed yet . If any one please help me to fixed this issue .I shall be very thank full.

我写了什么CSS来删除边框.

what css I write to remove the border.

<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>

推荐答案

InputProps 传递给输入变体的样式.对于 outlined 输入，存在一个名为 .MuiOutlinedInput-notchedOutline 的类，该类设置此问题的边框.要修改此类，请将样式传递给 InputProps 中的 notchedOutline 道具.

InputProps can be passed to the style the variants of the inputs. For outlined input there a class named .MuiOutlinedInput-notchedOutline which sets the border in this question's case. To modify this class, pass the styles to the notchedOutline prop in 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

Here is the working sandbox link: https://codesandbox.io/s/material-demo-forked-nhlde

这篇关于如何在材质ui的textfield fieldset中删除边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！