Material-ui: كيف تصمم لون إدخال حقول النص؟

تم إنشاؤها على ٢٠ ديسمبر ٢٠١٧ · 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 في ٢٠ ديسمبر ٢٠١٧

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

ال 9 كومينتر

لقد فعلت ذلك للتو باستخدام المغلق الخارجي

.something input {
  color: white;
}

quantuminformation في ٢٠ ديسمبر ٢٠١٧

👎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 في ٢٠ ديسمبر ٢٠١٧

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

لا يعمل في "@material-ui/core"

sandy0096 في ١٣ يونيو ٢٠١٨

👍32 😕1 😄1 👎1

أي تحديثات ، كيف تجعلها تعمل مع @material-ui/core ؟ أنا عالق بشدة في هذا

pankajparkar في ٦ ديسمبر ٢٠١٨

pankajparkar لقد قمت بتحديث إجابتي السابقة للعمل مع أحدث إصدار: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. أتمنى أن تساعدني ، أعلمني! بدلاً من ذلك ، لدينا عرض توضيحي للتخصيص في https://material-ui.com/demos/text-fields/#customized -inputs.

oliviertassinari في ٦ ديسمبر ٢٠١٨

oliviertassinari شكرا جزيلا. اضطررت إلى إزالة label لجعله يعمل.
هل لديك أي حل / حل بديل لجعله يعمل مع الملصق. أفهم سبب تراكب التسمية (لقد قمت بفرزها جزئيًا عن طريق تطبيق z-index ، لكن هذا أدى إلى مشاكل مختلفة).

رمز المشكلة

pankajparkar في ٧ ديسمبر ٢٠١٨

شكرا جزيلا

vaydi في ٨ أكتوبر ٢٠١٩

دانغ ، لم يدرك أبدًا مدى عدم شعبية إجابتي الأولية

quantuminformation في ٨ أكتوبر ٢٠١٩

oliviertassinari شكرا جزيلا. اضطررت إلى إزالة label لجعله يعمل.
هل لديك أي حل / حل بديل لجعله يعمل مع الملصق. أفهم سبب تراكب التسمية (لقد قمت بفرزها جزئيًا عن طريق تطبيق z-index ، لكن هذا أدى إلى مشاكل مختلفة).
رمز المشكلة

أنا أيضا بحاجة بالضبط نفس الشيء!