我提到这个网页。

const styles = theme => ({
    multilineColor:{
        color: red 
    }
});

<TextField 
  className = "textfield"
  fullWidth
  multiline
  InputProps={{
    className: classes.multilineColor
  }}
  label   = "Debugger"
  rows    = "10"
  margin  = "normal" />

<TextField 
    className = "textfield"
    fullWidth
    multiline
    InputProps={{
        classes: {
            input: classes.multilineColor
        }
    }}
    label   = "Debugger"
    rows    = "10"
    margin  = "normal"
/>

Using inputProps is correct, as others have posted. Here s a slightly simpler example:

<TextField
  multiline
  inputProps={{ style: { color: "red" } }}
  /* ... */
/>

How to set color property and background property of Text Field

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "white"
  }
};

function CustomizedInputs(props) {
  const { classes } = props;

  return (
    <TextField
      defaultValue="color"
      className={classes.root}
      InputProps={{
        className: classes.input
      }}
    />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomizedInputs);

//textfield customization
const CssTextField = withStyles({
  root: {
     & .MuiInputBase-root : {
      color:  white ,
    },
  },
})(TextField);

我们应该努力!

import { TextField, makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  input: {
    color: "#FFF",
  },
}));

const MyInput = () => {
  const classes = useStyles();

  return (
    <TextField
      inputProps={{ className: classes.input }}
      id="outlined-basic"
      label="Write something..."
      variant="outlined"
    />
  );
};

export default MyInput;

如果你寻找一种更通用的解决方案,你就可以改变你的主题,以遏制这种肤色,就我而言,我也需要改变投入背景和残疾者,因此,我最后使用“Themevider”和“Theme”。

习俗主题

const theme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          backgroundColor:  #fff ,
           &.Mui-disabled : {
            backgroundColor:  #e4e4e4 ,
          },
        },
      },
    },
  },
});
const withDefaultTheme =
  <P extends object>(Component: React.ComponentType<P>) =>
  (props: any) =>
    (
      <ThemeProvider theme={theme}>
        <Component {...props} />
      </ThemeProvider>
    );

我的情况是:

import React from  react ;
import {  TextField, } from  @mui/material ;
import { makeStyles } from "@mui/styles";


const useStyles = makeStyles((theme) => ({
    textfield_input: {
        color: `#c5cae9 !important`,
    }
}));

function Videoedit() {
  const classes = useStyles();
  return (<div>
            <TextField
              value={title}
              required
              label="Title"
              variant="filled"
              inputProps={{className: classes.textfield_input}}
              color="primary"
              focused
            />)
        </div>;
}

export default Videoedit;

if you are using styled component with TextField then just write this code inside your styled component:

  input: {
    color:  #ffffff ,
  },

if you want to change placeholder color:

  label: {
    color:  #ffffff ,
  },

As Mui documentation says you can create styled text field with these properties:

const CssTextField = styled(TextField)({
     & label.Mui-focused : {
      color:  white ,
    },
     & .MuiInput-underline:after : {
      borderBottomColor:  white ,
    },
     & .MuiInputLabel-root : {
      color:  white ,
    },
     & .MuiOutlinedInput-root : {
       & fieldset : {
        borderColor:  white ,
      },
       &:hover fieldset : {
        borderColor:  white ,
      },
       &.Mui-focused fieldset : {
        borderColor:  white ,
      },
    },
  });

您可以使用

<CssTextField label="*" name="*" variant="outlined" size="small" />

我得以在座右边拿到一些例子,即:@Asif Mahmood @Karlo Tvrdinic @Near Huscarl, 并直接通过X推进和利用主题直接适用于文本现场。

我的项目的一个例子是:

我也许会很晚,但这是我用什么来把我对座标上所有文字领域的颜色加以规范。

const theme = createTheme({
  palette: {
    primary: {
      main:  #160033 ,
      contrastText:  #ffffff ,
    },
    secondary: {
      main:  #BC12B4 ,
      contrastText:  #F7F5FF ,
    },
  },
  components: {
    MuiTextField: {
      defaultProps: {
        color: "secondary",
        inputProps: {
          style: {
            color: "#160033" // This sets the text field font color
          }
        }
      }
    },
})

function App() {
  return (
    <ThemeProvider theme={theme} >
    // Your css baseline here...
    // Your routing component here...
    </ThemeProvider>
  )
}

这些其他办法都没有完全针对我想要做的黑暗。 这为我提供了材料5.x:

<TextField
    sx={{
      border:  1px solid rgba(255,255,255,.6) ,
      borderRadius: 3,
    }}
    InputLabelProps={{
      style: { color:  #fff , backgroundColor:  var(--green-80, #184743)  },
    }}
    InputProps={{ style: { color:  #fff  } }}
    id={id}
    label={label}
    variant="outlined"
    size="small"
  />

  <TextField
      required
      id="outlined-required"
      placeholder="Email"
      onChange={(e) => setEmail(e.target.value)}
      autoComplete={false}
      size="large"
      sx={{
        mb: "1rem",
        bgcolor: "rgb(51, 51, 51)",
        "& .MuiInputBase-root": {
          color: "white",
          "& > fieldset": {
            borderColor: "rgb(171, 171, 171)",
          },
          "&:hover fieldset": {
            borderColor: "white",
          },
          "&.Mui-focused fieldset": {
            borderColor: "white",
          },
        },
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <EmailOutlined
              sx={{ color: "rgb(171, 171, 171)" }}
              fontSize="large"
            />
          </InputAdornment>
        ),
      }}
    />

采用以下构成部分:

const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},

}
})(TextField);