是否可以在material-ui-next中更改TextField的字体颜色？

Question

我目前正在使用材料-ui-next

我在尝试更改多行TextField的字体颜色时遇到问题.

<TextField className = "textfield"
           fullWidth
           multiline
           label   = "Debugger"
           rows    = "10"
           margin  = "normal"/>

和css:

.textfield {
    background-color: #000;
    color: green;
}

然而,不知何故,我只得到黑色背景,字体仍然是黑色.有谁知道如何使用material-ui-next正确更改Textfield的字体颜色？

Answer 1

在Material UI v5中，您可以使用sxprop 来执行此操作：

<TextField sx={{ input: { color: 'red' } }} />

如果您想要更可重用的东西，则需要更长的方法：

const options = {
  shouldForwardProp: (prop) => prop !== 'fontColor',
};
const StyledTextField = styled(
  TextField,
  options,
)(({ fontColor }) => ({
  input: {
    color: fontColor,
  },
}));

<StyledTextField label="Outlined" fontColor="green" />
<StyledTextField label="Outlined" fontColor="purple" />

现场演示

Answer 2

正如其他人所发布的那样，使用inputProps是正确的。这是一个稍微简单的例子：

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

Answer 3

我在这个页面上引用了TextField API

我使用Classes重写TextField

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

使用InputProps将类应用于TextField.

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

希望这会奏效.

Answer 4

如何设置文本字段的颜色属性和背景属性

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

Answer 5

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