재료 UI에서 텍스트 필드의 글꼴 크기를 변경할 수 없습니다.

재료 UI에서 텍스트 필드의 글꼴 크기를 변경할 수 없습니다.

저는 material ui를 배우려고 합니다.페이지의 텍스트 필드를 확대하려고 합니다.그러나 필드와 함께 포함하는 스타일은 높이, 너비 및 크기를 제외한 다른 속성을 변경합니다.내 코드는 다음과 같습니다.

const styles = {
container: {
    display: 'flex',
    flexWrap: 'wrap',
},
textField: {
    // marginLeft: theme.spacing.unit,
    // marginRight: theme.spacing.unit,
    width: 300,
    margin: 100,
    fontSize: 50 //??? Doesnt work
}
}

스테이트리스 컴포넌트(React)는 다음과 같습니다.

const Searchbox = (props) => {

    const { classes } = props;

    return (
        <TextField
            onKeyDown={props.onKeyDown}
            id="with-placeholder"
            label="Add id"
            placeholder="id"
            className={classes.textField}
            margin="normal"
            autoFocus={true}
            helperText={"Add an existing id or select "}
        />
    );
};

export default withStyles(styles)(Searchbox);

스타일을 적용하는 JS 접근법에 있어서 간단한 CSS이기 때문에 로켓 과학이 없다는 것을 완전히 이해한다.

그러나 텍스트 필드의 기본 글꼴 크기를 재정의할 수 없습니다.어떤 도움이라도 감사히 받겠습니다.

"TextField API" 페이지에서 설명한 바와 같이 스타일을 적용합니다.InputProps입력 요소에 스타일을 적용합니다.

코드는 다음과 같습니다.

const styles = {
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    width: 300,
    margin: 100,
  },
  //style for font size
  resize:{
    fontSize:50
  },
}

<TextField
  id="with-placeholder"
  label="Add id"
  placeholder="id"
  InputProps={{
    classes: {
      input: classes.resize,
    },
  }}
  className={classes.textField}
  margin="normal"
  autoFocus={true}
  helperText={"Add an existing id or select "} />

입력 라벨과 입력 텍스트의 글꼴 크기를 변경하는 가장 간단한 방법은 인라인 스타일링을 사용하는 것입니다.

<TextField
  label="input label name here"
  margin="normal"
  inputProps={{style: {fontSize: 40}}} // font size of input text
  InputLabelProps={{style: {fontSize: 40}}} // font size of input label
/>

현재 버전 3.8.1을 사용하고 있으며, 조금 더 간단한 솔루션이 있을 수 있습니다.

- 그래, 아니에요! - 왜요?TextField

inputProps={{
  style: {fontSize: 15} 
}}

단, 이 조작에 따라서는, 다음과 같은 조작이 필요하게 되는 경우가 있습니다.lineHeight더 예쁘게 보이게 하려고요.

사용자가 TextField 컴포넌트와 대화하기 전(라벨)과 후(입력 텍스트) 모두에서 텍스트 크기를 변경하려면 다음과 같이 하십시오.

<TextField
  id="MyTextField"
  InputProps={{
    classes: {
      input: classes.formTextInput
    }
  }}
  InputLabelProps={{
    classes: {
      root: classes.formTextLabel
    }
  }}
/>

<TextField inputStyle={styles.textField} />

다음은 전체 코드입니다.

import React from 'react';
import TextField from 'material-ui/TextField';

const styles = {
    textField: {
    fontSize: 50, //works!
 }
}

const Searchbox = (props) => {
return (
    <TextField
        onKeyDown={props.onKeyDown}
        id="with-placeholder"
        label="Add id"
        placeholder="id"
        inputStyle={styles.textField}
        margin="normal"
        autoFocus={true}
        helperText={"Add an existing id or select "}
    />
    );
};
export default Searchbox;

사용하다sx프로펠러 및 타깃 입력 베이스 클래스MuiInputBase-input

 <TextField
          sx={{
            '.MuiInputBase-input': { fontSize: '1.25rem' },
          }}
/>

소품으로 시험해 보다inputStyle

inputStyle --> TextField 입력 요소의 인라인 스타일을 덮어씁니다.multiLine이 false인 경우: 입력 요소의 스타일을 정의합니다.multiLine이 참일 경우: 텍스트 영역의 컨테이너 스타일을 정의합니다.

    <TextField
      inputStyle={{ fontSize: "50px" }}
      hintText="Hint Text"
    />

<TextField
    type="text"
    className={classes.financing_input}
    placeholder={this.props.CustomerInfoData.phone}
    name="phone"
    id="fixInputSize" //Works 
    onChange={this.handleChange}
/>

//in your css file
#fixInputSize{
  font-family: Roboto;
  font-size: 11px;
}

MUI는 모든 요소를 빠르게 스타일링하기 위한 테마를 사용하고 있습니다.이 유용한 툴은 https://bareynol.github.io/mui-theme-creator/을 참조하십시오.

간단한 테마 수정이 앱 디자인 전체에 어떤 영향을 미치는지 이해할 수 있습니다.

스타일링에 sass를 사용한다면 이것도 할 수 있어요.

<Textfield className="custom-input" />

그리고 나서 sass에 다음과 같이 적습니다.

.custom-input {
  width: ....px;

  fieldset { /* settings like border-radius */ }

  input {
    font-size: 1.2rem;
  }
}

언급URL : https://stackoverflow.com/questions/50319847/cannot-change-font-size-of-text-field-in-material-ui