Material-ui: TextFields इनपुट रंग कैसे शैली के लिए?

को निर्मित 20 दिस॰ 2017 · 9टिप्पणियाँ · स्रोत: mui-org/material-ui

इन निविष्टियों के टेक्स्ट रंग को बदलने के बारे में कोई मार्गदर्शन नहीं है https://material-ui-next.com/demos/text/fields/

क्या हम ऐसा करने के लिए सिर्फ बाहरी सीएसएस का उपयोग करते हैं?

मैंने भी यह कोशिश की, लेकिन यह टाइपस्क्रिप्ट चेक पास नहीं करता है:

 <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; }'.

यह विशुद्ध रूप से टाइपस्क्रिप्ट प्रकार की समस्या हो सकती है

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 20 दिस॰ 2017

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

सभी 9 टिप्पणियाँ

मैंने इसे बाहरी सीएसएस के साथ किया

.something input {
  color: white;
}

quantuminformation 20 दिस॰ 2017

👎21 👍2 😕1

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

oliviertassinari 20 दिस॰ 2017

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

"@material-ui/core" में काम नहीं करता है

sandy0096 13 जून 2018

👍32 😕1 😄1 👎1

कोई भी अपडेट, इसे @material-ui/core साथ कैसे काम करना है? मैं इस पर बुरी तरह से फंस गया हूं

pankajparkar 6 दिस॰ 2018

@pankajparkar मैंने नवीनतम संस्करण के साथ काम करने के लिए अपने पिछले उत्तर को अपडेट किया है: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532। मुझे उम्मीद है कि मदद, मुझे बताएं! वैकल्पिक रूप से, हमारे पास https://material-ui.com/demos/text-fields/#customized -inputs में एक कस्टमाइज़ेशन डेमो है।

oliviertassinari 6 दिस॰ 2018

@oliviertassinari बहुत बहुत धन्यवाद। मुझे इसे काम करने के लिए label निकालना पड़ा।
क्या आपके पास लेबल के साथ काम करने के लिए कोई समाधान / समाधान है। मैं समझता हूं कि लेबल ओवरले क्यों हो जाता है (मैंने z-index लागू करके आंशिक रूप से इसे सॉर्ट किया, लेकिन इससे अलग समस्याएं पैदा हुईं)।

समस्या कोडपेन यहाँ

pankajparkar 7 दिस॰ 2018

आपका बहुत बहुत धन्यवाद

vaydi 8 अक्तू॰ 2019

डांग, कभी भी महसूस नहीं किया कि मेरा प्रारंभिक उत्तर कितना अलोकप्रिय था

quantuminformation 8 अक्तू॰ 2019

@oliviertassinari बहुत बहुत धन्यवाद। मुझे इसे काम करने के लिए label निकालना पड़ा।
क्या आपके पास लेबल के साथ काम करने के लिए कोई समाधान / समाधान है। मैं समझता हूं कि लेबल ओवरले क्यों हो जाता है (मैंने z-index लागू करके आंशिक रूप से इसे सॉर्ट किया, लेकिन इससे अलग समस्याएं पैदा हुईं)।
समस्या कोडपेन यहाँ

मुझे भी ठीक वैसा ही चाहिए!

AjithkumarJM 21 अग॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: TextFields इनपुट रंग कैसे शैली के लिए?

सबसे उपयोगी टिप्पणी

सभी 9 टिप्पणियाँ

संबंधित मुद्दों