我如何更改 Mui 中的 TextField 邊框半徑

Question

我正在嘗試更改 mui TextField邊框半徑，但它不起作用。 誰能幫我解決這個問題。

這是我的代碼：

<TextField variant="outlined" sx={{ borderRadius: 5 }} />

任何人都可以解決這個問題嗎？

Answer 1

覆蓋MuiOutlinedInput-root類

 sx={{
      ".MuiOutlinedInput-root": {
        borderRadius: 5 
      }
    }}

Answer 2

這很簡單。 您可以使用InputProps來解決這個問題。

這是解決方案：

<TextField
     placeholder="My TextField"
     InputProps={{
         sx: {borderRadius: 5},
     }}
/>

Answer 3

嘗試這個

<TextField
    className="inputRounded"
    placeholder="Search"
    variant="outlined"
    size="small"
  />
</div>

Answer 4

如果您正在為所有文本字段尋找更通用的解決方案，您可以在您的主題中為Textfield字段設置borderRadius 。 所以你不必在每個上添加和重復sx屬性。

這是您的主題文件中的代碼：

export const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
              borderRadius: 5,
          },
        },
      },
    }
    }
  });

或者你可以像這樣創建一個樣式化的組件：

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

export const InputStyled = styled(TextField)`
  & .MuiOutlinedInput-root {
    border-radius: 10px; 
  }
`;

//Use it like this:
<InputStyled label="email" variant="standard" />