如何更改MUI TextField 的邊框半徑和按鈕顏色

Question

它們是這樣的，沒有邊界半徑我希望它們看起來像這樣，有邊界半徑

我的代碼看起來像這樣。

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

我的 styled.js

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

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

我嘗試為每個輸入創建一個樣式組件並向該組件添加一個半徑，並嘗試直接在 TextField 組件內添加，但這些都不起作用。

Answer 1

嘗試使用 inputProps 修改您的 TextField

<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' }, }
            }
            />

Answer 2

我是這樣解決的。

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