I am currently working with the mui TextField component and facing an issue. I am able to change the color when it is focused using the theme, but I cannot find a way to adjust its color (label and border) in its initial state when it's not focused. It seems to always default to black, which makes it difficult to display properly against a black background.
Is there a way to set the initial color to white or any other preferred color? Thank you.
Additionally, I am encountering a similar problem with the Select list.
Below is the relevant part of my code:
class Register extends React.Component {
render () {
return (
<Theme primary={{main: '#F5BD1F',dark: '#ffc100'}} secondary={{main : '#2a2a2a'}} >
<Box sx={{backgroundColor: 'secondary.dark', display : 'flex', alignItems: 'center', justifyContent: 'center', minHeight : '100vh'}}>
<Box sx={{minHeight : '50vh', width : '50vw'}}>
<div style={{margin : '50px'}}>
<h1 style={{textAlign : 'center', fontSize: '20px'}}>Register a Metahkg account</h1>
<TextField sx={{marginBottom: '20px', input : {color : 'white'}}} variant="standard" type="text" label="Username" required fullWidth />
<TextField sx={{marginBottom: '20px', input : {color : 'white'}}} variant="standard" type="email" label="Email" required fullWidth/>
<TextField sx={{marginBottom: '20px', input : {color : 'white'}}} variant="standard" type="password" label="Password" required fullWidth/>
<Sex/><br/>
<Button variant="outlined">Register</Button>
</div>
</Box>
</Box>
</Theme>)}}
Custom Components:
Sex Component:
function Sex () {
const [sex, setSex] = React.useState('');
const changeHandler =
(e:any) => {setSex(e.target.value);}
return (
<FormControl sx={{ minWidth: 200 }}>
<InputLabel>Sex</InputLabel>
<Select value={sex}
label="Sex" onChange={changeHandler}>
<MenuItem value={1}>Male</MenuItem>
<MenuItem value={0}>Female</MenuItem>
</Select>
</FormControl>)}
Theme Configuration:
import { createTheme, ThemeProvider } from '@mui/material/styles';
declare module '@mui/material/styles' {
interface Theme {
status: {
danger: string;
};}
interface ThemeOptions {
status?: {
danger?: string;
};}}
export default function Theme(props:any) {
const theme = createTheme({
palette: {
primary: props.primary,
secondary: props.secondary
}})
return (
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>)}
Visit the website
View source code