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일

Dang, 내 첫 대답이 얼마나 인기가 없었는지 몰랐어

quantuminformation 에 2019년 10월 08일

@oliviertassinari 감사합니다. 작동하게하려면 label 을 제거해야했습니다.
레이블로 작업 할 수있는 솔루션 / 해결 방법이 있습니까? 레이블이 오버레이되는 이유를 이해합니다 ( z-index 를 적용하여 부분적으로 정렬했지만 다른 문제가 발생했습니다).
여기에 문제

나도 똑같은 것이 필요합니다!

AjithkumarJM 에 2020년 08월 21일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Material-ui: TextFields 입력 색상의 스타일을 지정하는 방법은 무엇입니까?

가장 유용한 댓글

모든 9 댓글

관련 문제