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

@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

"@material-ui/core"では機能しません

sandy0096 2018年06月13日

👍32 😕1 😄1 👎1

更新、 @material-ui/coreで動作させる方法

pankajparkar 2018年12月06日

@pankajparkar以前の回答を更新して、最新バージョンで動作するようにしました： https ：//github.com/mui-org/material-ui/issues/9574#issuecomment-353179532。私はその助けを願っています、私に知らせてください！または、 https： //material-ui.com/demos/text-fields/#customized-inputsにカスタマイズデモがあり

oliviertassinari 2018年12月06日

@oliviertassinariどうもありがとう。動作させるにはlabelを削除する必要がありました。
ラベルで機能させるための解決策/回避策はありますか？ラベルがオーバーレイされる理由を理解しています（ z-index適用して部分的に並べ替えましたが、さまざまな問題が発生しました）。

ここに問題のある

pankajparkar 2018年12月07日

どうもありがとうございました

vaydi 2019年10月08日

ダン、私の最初の答えがどれほど人気がなかったか気づかなかった

quantuminformation 2019年10月08日

@oliviertassinariどうもありがとう。動作させるにはlabelを削除する必要がありました。
ラベルで機能させるための解決策/回避策はありますか？ラベルがオーバーレイされる理由を理解しています（ z-index適用して部分的に並べ替えましたが、さまざまな問題が発生しました）。
ここに問題のある

私もまったく同じものが必要です！

AjithkumarJM 2020年08月21日

このページは役に立ちましたか？

0 / 5 - 0 評価

Material-ui: TextFieldsの入力色のスタイルを設定するにはどうすればよいですか？

最も参考になるコメント

全てのコメント9件

関連する問題