web-dev-qa-db-ja.com

マテリアルUIのテキストフィールドのフォントサイズを変更できません

私は物質的な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として、ロケット科学がないことを完全に理解しています。

ただし、テキストフィールドの基本フォントサイズを上書きすることはできません。どんな助けでも大歓迎です

cssreactjsmaterial-ui
12
Omkar

ページで説明したように、 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 "}/>
24
anonymous_siva

私はバージョン3.8.1を使用していますが、もう少し簡単な解決策があるかもしれません。

TextFieldで

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

ただし、これはlineHeightを微調整して見栄えを良くすることも含まれます。

5
Carol Chen

入力ラベルと入力テキストの両方のフォントサイズを変更する最も簡単な方法は、インラインスタイルを使用することです。

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

Edit QuizMaker

2
AlienKevin

ユーザーがTextFieldコンポーネントを操作する前（ラベル）と後（テキストを入力）の両方でテキストのサイズを変更するために私がしなければならなかったことは次のとおりです。

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

小道具inputStyleで試してください

inputStyle-> TextFieldの入力要素のインラインスタイルをオーバーライドします。 multiLineがfalseの場合：入力要素のスタイルを定義します。 multiLineがtrueの場合：textareaのコンテナーのスタイルを定義します。

    <TextField
      inputStyle={{ fontSize: "50px" }}
      hintText="Hint Text"
    />
1
Ashh
<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;
1
Ayorinde
<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;
}
0
Julio fils