Material-ui: 如何设置TextFields输入颜色的样式？

创建于 2017-12-20 · 9评论 · 资料来源: mui-org/material-ui

没有有关如何更改这些输入的文本颜色的指南https://material-ui-next.com/demos/text-fields/

我们是否仅使用外部CSS来做到这一点？

我也试过了，但是它没有通过TypeScript检查：

 <TextField
          inputProps={{ style: { fontFamily: 'Arial', color: 'white'}}}
          style={{ flex: 1, margin: '0 20px 0 0', color: 'white'}}
          onChange={(e: ChangeEvent<HTMLInputElement>) => changeSearch(e.target.value)}
          type="text"
          value={reducerState.search}
        />

(50,11): error TS2339: Property 'inputProps' does not exist on type 'IntrinsicAttributes & TextFieldProps & { children?: ReactNode; }'.

这可能纯粹是TypeScript类型问题

TextField question

资料来源

quantuminformation

👀3

最有用的评论

@QuantumInformation我很高兴您找到了解决方案。我鼓励人们这样做：

import React from "react";
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);

https://codesandbox.io/s/1370v7y4zj

capture d ecran 2018-12-06 a 19 31 05

请注意，您还可以定位全局类名（ .MuiInputBase-root和.MuiInputBase-input ）。

oliviertassinari 于 2017-12-20

👍45 🎉8 ❤4 😕3 👀2 🚀1

所有9条评论

我只是用外部CSS完成的

.something input {
  color: white;
}

quantuminformation 于 2017-12-20

👎21 👍2 😕1