Material-ui: Bagaimana cara mengatur gaya warna input BidangTeks?

Dibuat pada 20 Des 2017 · 9Komentar · Sumber: mui-org/material-ui

Tidak ada panduan tentang cara mengubah warna teks dari input ini https://material-ui-next.com/demos/text-fields/

Apakah kita hanya menggunakan css eksternal untuk melakukan ini?

Saya juga mencoba ini tetapi tidak lolos pemeriksaan 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; }'.

Ini mungkin murni masalah tipe TypeScript

TextField question

Sumber

quantuminformation

👀3

Komentar yang paling membantu

@QuantumInformation Saya senang Anda menemukan solusi. Saya akan mendorong orang untuk melakukannya dengan cara ini:

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

Perhatikan bahwa Anda juga dapat menargetkan nama kelas global ( .MuiInputBase-root dan .MuiInputBase-input ).

oliviertassinari pada 20 Des 2017

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

Semua 9 komentar

Saya baru saja melakukannya dengan css eksternal

.something input {
  color: white;
}

quantuminformation pada 20 Des 2017

👎21 👍2 😕1

@QuantumInformation Saya senang Anda menemukan solusi. Saya akan mendorong orang untuk melakukannya dengan cara ini:

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

Perhatikan bahwa Anda juga dapat menargetkan nama kelas global ( .MuiInputBase-root dan .MuiInputBase-input ).

oliviertassinari pada 20 Des 2017

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

Tidak bekerja di "@material-ui/core"

sandy0096 pada 13 Jun 2018

👍32 😕1 😄1 👎1

Adakah pembaruan, bagaimana membuatnya bekerja dengan @material-ui/core ? Saya sangat terjebak dalam hal ini

pankajparkar pada 6 Des 2018

@pankajparkar Saya telah memperbarui jawaban saya sebelumnya untuk bekerja dengan versi terbaru: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. Saya harap bantuan itu, beri tahu saya! Atau, kami memiliki demo penyesuaian di https://material-ui.com/demos/text-fields/#customized -inputs.

oliviertassinari pada 6 Des 2018

@oliviertassinari terima kasih banyak. Saya harus menghapus label agar berfungsi.
Apakah Anda memiliki solusi / solusi untuk membuatnya berfungsi dengan label. Saya mengerti mengapa label mendapat overlay (saya menyortirnya sebagian dengan menerapkan z-index , tetapi itu menyebabkan masalah yang berbeda).

Masalah kode di sini

pankajparkar pada 7 Des 2018

Terima kasih banyak

vaydi pada 8 Okt 2019

Dang, tidak pernah menyadari betapa tidak populernya jawaban pertamaku

quantuminformation pada 8 Okt 2019

@oliviertassinari terima kasih banyak. Saya harus menghapus label agar berfungsi.
Apakah Anda memiliki solusi / solusi untuk membuatnya berfungsi dengan label. Saya mengerti mengapa label mendapat overlay (saya menyortirnya sebagian dengan menerapkan z-index , tetapi itu menyebabkan masalah yang berbeda).
Masalah kode di sini

Saya juga butuh yang persis sama!