material ui change textfield initial color

Question

I am trying to use mui TextField, I can change the color when focused (using theme). But however, I can't seem to find a way to changed its color (label, and border) when it's NOT focused (initial). Seems like it's always black, which means if I am using a black background it cannot be properly shown.

I would like a way to change its initial color to white, or any other color. Thanks.

Also, with the Select list, I have a same problem.

Below is my code (unrelated things are removed):

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>)}}

Components:

Sex:

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:

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>)}

site
source code

Answer 1

See code below and codesandbox for a working example.

import { CssBaseline, MenuItem, Stack, TextField } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Fragment } from "react";

const StyledTextField = styled(TextField)({
  "& label": {
    color: "white"
  },
  "&:hover label": {
    fontWeight: 700
  },
  "& label.Mui-focused": {
    color: "white"
  },
  "& .MuiInput-underline:after": {
    borderBottomColor: "white"
  },
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "white"
    },
    "&:hover fieldset": {
      borderColor: "white",
      borderWidth: 2
    },
    "&.Mui-focused fieldset": {
      borderColor: "white"
    }
  }
});

export default function IndexPage() {
  return (
    <Fragment>
      <CssBaseline />
      <Stack
        spacing={2}
        margin={2}
        padding={2}
        height={"100vh"}
        component="form"
        backgroundColor="black"
      >
        <StyledTextField variant="outlined" label="Field" />
        <StyledTextField variant="outlined" label="Sex" select>
          <MenuItem value={1}>Male</MenuItem>
          <MenuItem value={0}>Female</MenuItem>
        </StyledTextField>
      </Stack>
    </Fragment>
  );
}