Material-UI에서 TextField의 밑줄을 삭제하려면 어떻게 해야 합니까?

Material-UI에서 TextField의 밑줄을 삭제하려면 어떻게 해야 합니까?

이 질문에는 이미 답변이 있습니다.

MUI TextField 구성 요소의 스타일을 MUI 제공자를 사용하지 않고 재정의하려면 어떻게 해야 합니까? (4개의 답변)

닫힘2년 전에요.

material-ui TextField를 사용할 때 TextField를 naked(밑줄 없음)로 하고 싶습니다.material-ui의 InputBase를 사용하면 가능하지만, 그러기 위해서는 TextField API를 사용해야 하는데 API 가이드에서는 방법을 찾을 수 없었습니다.

를 사용할 수도 있습니다.InputPropsTextField 컴포넌트의 프로포트를 사용하여 이 작업을 수행합니다.disableUnderline의 재산.true.

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

이 답변은 현재 받아들여지고 있습니다만, 다른 답변은 참조해 주세요(이것을 사용해 주세요).disableUnderline이 답변은 최근 밑줄을 커스터마이즈하는 방법(이 답변과 유사한 접근법 사용)에 대한 답변을 작성한 후 작성했지만, 밑줄을 삭제하는 데 특화된 속성이 있다는 것을 놓쳤습니다.

---

밑줄을 삭제하는 예를 다음에 나타냅니다. :before기본 및 호버 스타일링에 사용됩니다.:after는 포커스 스타일링에 사용되므로 둘 다 테두리를 제거해야 합니다.

복수의 앰퍼샌드(예:"&&&:before")는 규칙의 CSS 고유성을 높여 기본 스타일링(예: )을 얻습니다.

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  underline: {
    "&&&:before": {
      borderBottom: "none"
    },
    "&&:after": {
      borderBottom: "none"
    }
  }
});
function App() {
  const classes = useStyles();
  return <TextField defaultValue="default text" InputProps={{ classes }} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

관련 답변:테마를 사용하지 않고 Material-UI 밑줄을 커스터마이즈하려면 어떻게 해야 합니까?

언급URL : https://stackoverflow.com/questions/57914368/how-can-i-remove-the-underline-of-textfield-from-material-ui