They are like this without border radius And i want they look like this, with a border-radius

My code look like this.

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

My styled.js

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

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

I tried create a styled-component for each input and add a radius to this component, and tried add directly inside the TextField component, but none of these worked.

CodePudding user response：

Try Modifying your TextField with inputProps

<AppTextField 
            placeholder="E-mail address"
            label="E-mail"
            id="outlined-basic"
            type={"email"}
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            inputProps:{
             { style: { border-radius: '20px' }, }
            }
            />

CodePudding user response：

I solved it this way.

 <AppTextField 
            placeholder="Digite sua senha" 
            label='Senha'
            id="outlined-basic"
            type={'password'}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{borderRadius:'20px'}}