在 MUI 中更改 TextField 字體顏色？

Question

我目前正在使用MUI 。

而且我在嘗試更改多行TextField的字體顏色時遇到問題。

<TextField className = "textfield"
           fullWidth
           multiline
           label   = "Debugger"
           rows    = "10"
           margin  = "normal"/>

CSS：

.textfield {
    background-color: #000;
    color: green;
}

但是，不知何故，我只得到黑色背景，字體仍然是黑色的。 有誰知道如何使用 MUI 正確更改TextField的字體顏色？

Answer 1

我提到了這個頁面TextField API

我使用類覆蓋 TextField

const styles = theme => ({
    multilineColor:{
        color:'red'
    }
});

使用 InputProps 將類應用到 TextField。

<TextField 
  className = "textfield"
  fullWidth
  multiline
  InputProps={{
    className: classes.multilineColor
  }}
  label   = "Debugger"
  rows    = "10"
  margin  = "normal" />

編輯在舊版本中，您必須指定鍵input

<TextField 
    className = "textfield"
    fullWidth
    multiline
    InputProps={{
        classes: {
            input: classes.multilineColor
        }
    }}
    label   = "Debugger"
    rows    = "10"
    margin  = "normal"
/>

希望這會奏效。

Answer 2

在MUI v5中，您可以使用sx prop 執行此操作：

<TextField sx={{ input: { color: 'red' } }} />

如果您想要更可重用的東西，請使用更長的方法：

const options = {
  shouldForwardProp: (prop) => prop !== 'fontColor',
};
const StyledTextField = styled(
  TextField,
  options,
)(({ fontColor }) => ({
  input: {
    color: fontColor,
  },
}));

<StyledTextField label="Outlined" fontColor="green" />
<StyledTextField label="Outlined" fontColor="purple" />

現場演示

Answer 3

如何設置文本字段的顏色屬性和背景屬性

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);

Answer 4

正如其他人所發布的那樣，使用inputProps是正確的。 這是一個稍微簡單的例子：

<TextField
  multiline
  inputProps={{ style: { color: "red" } }}
  /* ... */
/>

Answer 5

//textfield customization
const CssTextField = withStyles({
  root: {
    '& .MuiInputBase-root': {
      color: 'white',
    },
  },
})(TextField);

Answer 6

這應該工作！

import { TextField, makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  input: {
    color: "#FFF",
  },
}));

const MyInput = () => {
  const classes = useStyles();

  return (
    <TextField
      inputProps={{ className: classes.input }}
      id="outlined-basic"
      label="Write something..."
      variant="outlined"
    />
  );
};

export default MyInput;

Answer 7

如果您正在尋找更通用的修復，您可以更改主題以包含該顏色，在我的情況下，我需要更改輸入背景和禁用，所以我最終使用 ThemeProvider 和自定義主題。

自定義主題

const theme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          backgroundColor: '#fff',
          '&.Mui-disabled': {
            backgroundColor: '#e4e4e4',
          },
        },
      },
    },
  },
});
const withDefaultTheme =
  <P extends object>(Component: React.ComponentType<P>) =>
  (props: any) =>
    (
      <ThemeProvider theme={theme}>
        <Component {...props} />
      </ThemeProvider>
    );

Answer 8

這在我的情況下有效：

 import React from 'react'; import { TextField, } from '@mui/material'; import { makeStyles } from "@mui/styles"; const useStyles = makeStyles((theme) => ({ textfield_input: { color: `#c5cae9 !important`, } })); function Videoedit() { const classes = useStyles(); return (<div> <TextField value={title} required label="Title" variant="filled" inputProps={{className: classes.textfield_input}} color="primary" focused />) </div>; } export default Videoedit;

Answer 9

如果您使用帶有 TextField 的樣式組件，那么只需在您的樣式組件中編寫以下代碼：

  input: {
    color: '#ffffff',
  },

if you want to change placeholder color:

  label: {
    color: '#ffffff',
  },

Answer 10

使用您的組件，如下所示

 const MyTextField = withStyles({ root: { "& .MuiInputBase-root.Mui-disabled": { color: "rgba(0, 0, 0,0.0)" }, "& .MuiFormLabel-root.Mui-disabled": { color: "rgba(0, 0, 0,0.0)" }, } })(TextField);

Answer 11

試試下面的css

 .textfield{
     color: #000;
    }