材质 ui 更改文本字段初始颜色

Question

我正在尝试使用 mui TextField，我可以在聚焦时更改颜色（使用主题）。但是，当它没有聚焦（初始）时，我似乎找不到改变它的颜色（标签和边框）的方法。似乎它总是黑色的，这意味着如果我使用黑色背景，它就无法正确显示。

我想要一种将其初始颜色更改为白色或任何其他颜色的方法。谢谢。

另外，对于选择列表，我也有同样的问题。

下面是我的代码（不相关的东西都去掉了）：

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

组件：

性别：

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

主题：

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

请参阅下面的代码和codesandbox 以获取工作示例。

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