它们就像without border radius我希望它们看起来像with a border-radius
我的代码如下所示。

import { useCallback, useState } from "react"
import { MainContainer,PasswordDiv, Form, Logo, TeamNatalText, WrapperImgs, AppTextField, ButtonStyled} from "./styled"
import  Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button'
import logo from '../../assets/logo.png'
import teamnatal from '../../assets/teamnatal.png'

const LoginPage = () => {
    const[email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    return(
        <MainContainer className="container">
            <WrapperImgs>
            <TeamNatalText src={teamnatal} alt="logo" />
            <Logo src={logo} alt="logo" />
            </WrapperImgs>
            <Form>
                <AppTextField 
                placeholder="E-mail address"
                label="E-mail"
                id="outlined-basic"
                type={"email"}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required

                />
                <PasswordDiv>
                <AppTextField 
                placeholder="Digite sua senha" 
                label='Senha'
                id="outlined-basic"
                type={'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                
                />          
                    </PasswordDiv>
            
            <p>Não tem conta? <a href="https://www.google.com.br">Cadastrar</a></p>
            <ButtonStyled variant="contained">Login</ButtonStyled>
            </Form>
        </MainContainer>
    )
}
export default LoginPage

我的风格. js

export const AppTextField = styled(TextField)({
    backgroundColor: 'white',
    
    
})

export const ButtonStyled = styled(Button) ({
    backgroundColor: 'red',
    
})

我尝试为每个输入创建一个样式化组件，并向该组件添加一个半径，还尝试直接在TextField组件内部添加，但这些都不起作用。