懸停/鼠標懸停時如何從 TextField 中刪除邊框底部？

Question

我是 ReactJS 的初學者，我正在使用 materia materia-ui創建一個頁面。

我需要對TextField進行自定義。 當我在輸入字段上進行hover時，我不希望邊框底部發生變化。 但是，通過默認的 material-ui 設置，當我在元素上使用 hover 時，會更改邊框底部。 用下面的這張圖更容易解釋。 當我 hover 時，我不希望邊框變厚。 你能告訴我如何刪除這個嗎？

這是我放入codesandbox的代碼

 import React from "react"; import * as S from "./styles"; export default function App() { return ( <div className="App"> <S.Input label="Name" variant="standard" /> </div> ); }

 import styled from "styled-components"; import { TextField } from "@mui/material"; export const Input = styled(TextField)` && {:hover { border-bottom: none; } } `;

非常感謝您的幫助。

Answer 1

您可以像這樣覆蓋默認的 css （這里是沙箱）：

.MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before {

  border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;

}

理想情況下，您應該為此樣式創建自定義 class 並在必要時應用它，否則這些更改將是全局的。 例如：

.[your-custom-class-name].MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before {

  border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;

}

Answer 2

如果你想使用 styled-components，你可以像下面的代碼那樣做。

import styled from "styled-components";    
import { TextField } from "@mui/material";

export const InputStyled = styled(TextField)`
  & .MuiInputBase-root {
    :hover {
      :before {
        border-bottom: 1px solid rgba(0, 0, 0, 0.42);
      }
    }
  }
`;

<InputStyled label="Name" variant="standard" />