我試圖創建一個搜索表單，其中我附加圖像。我已經嘗試了一千個CSS，但是沒有辦法:我總是得到這個雙窗體邊框。沒有辦法拆下內輪輞。 我已經用樣式表和MUI主題試過了，但是沒有辦法。

input[type='text'] {
    width: 100%;
    padding: 12px 20px;
    margin: 16px 0; /* Increase top and bottom margin */
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}

為什么會發生這種事？

謝謝你。

這里是最小的可重復示例:

theme.js文件:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#6600ff',
    },
    secondary: {
      main: '#f0e6ff',
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '15px',
          textTransform: 'none',
          transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
          '&:hover': {
            transform: 'scale(1.03)',
            boxShadow: '0px 6px 6px rgba(0, 0, 0, 0.3)',
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: '15px',
          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
          margin: '2px',
          backgroundColor: '#f0f0f0',
        },
      },
    },
    MuiBox: {
      styleOverrides: {
        root: {
          backgroundColor: '#f0f0f0',
        },
      },
    },
    MuiGrid: {
      styleOverrides: {
        root: {
          padding: '20px',
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiInputBase-root': {
            borderRadius: '15px', // Redondear los bordes del campo de texto
            backgroundColor: '#ffffff', // Cambiar el fondo del campo de texto
            padding: '5px', // A?adir un poco de padding
          },
        },
      },
    },
  },
  typography: {
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
  },
});

export default theme;

App.js是主文件，它使用& quot主題& quot：

import React, { useState, useEffect } from 'react';
import { Box, Typography, TextField } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme'
import './components/styles.css';

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Box className="patient-search">
      <Typography variant="h6">Buscar paciente</Typography>
      <TextField
        label="Apellido 1"
      />
      <TextField
        label="Apellido 2"
      />
      <TextField
        label="Nombre"
      />
    </Box>
    </ThemeProvider>
  );
}

export default App;

通過這個最小的、可重復的示例，您可以在文本bos中看到相同的結果，正如我在圖片中向您展示的那樣: