Question

我在尝试更改多行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

我参考了这个页面TextField API

我使用Classes

覆盖TextField

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

使用InputProps将类应用于TextField。

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

希望这会奏效。

Answer 2

这应该可行！

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;

Answer 3

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

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 4

像下面一样使用您的组件

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

Answer 5

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

Answer 6

尝试以下css

function submitCSMBtn(target, i) {
  var submitBtn = $('<button/>', {
 'class': 'btn btn-info fa fa-download',
 'type': 'submit',
 });

return submitBtn;
}

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

6 个答案: