MUI에서 TextField 글꼴 색상을 변경하시겠습니까?

MUI에서 TextField 글꼴 색상을 변경하시겠습니까?

저는 현재 MUI를 사용하고 있습니다.

여러 줄의 글꼴 색상을 변경하는 데 문제가 있습니다.TextField.

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

그리고 CSS:

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

하지만 왠지 검정 배경만 나오고 글꼴은 검정색입니다.폰트 색상을 적절하게 변경하는 방법 아는 사람?TextFieldMUI를 사용하는가?

MUI v5 에서는, 이것을 다음의 방법으로 실행할 수 있습니다.sx소품:

<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" />

라이브 데모

TextField API 페이지를 참조했습니다.

클래스를 사용하여 텍스트 필드를 덮어씁니다.

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"
/>

이게 먹히길 바라.

사용.inputProps다른 사람들이 게시한 바와 같이 정답입니다.다음은 조금 더 간단한 예입니다.

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

텍스트 필드의 색상 특성 및 배경 특성 설정 방법

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

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

이거면 될 거야!

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;

좀 더 일반적인 수정 방법을 찾고 있다면 테마를 해당 색상을 포함하도록 변경할 수 있습니다. 제 경우 입력 배경과 비활성화도 변경해야 하므로 Theme Provider와 커스텀 테마를 사용하게 되었습니다.

커스텀 테마

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

내 경우에는 다음과 같이 동작합니다.

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;

TextField와 함께 스타일링된 컴포넌트를 사용하는 경우 스타일링된 컴포넌트 안에 다음 코드를 입력합니다.

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

if you want to change placeholder color:

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

아래와 같이 컴포넌트를 사용하세요.

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

아래 css에서 시도합니다.

 .textfield{
     color: #000;
    }

언급URL : https://stackoverflow.com/questions/50228108/change-textfield-font-color-in-mui