web-dev-qa-db-ja.com

TextFieldのプレースホルダーのスタイル設定

TextField APIは、入力要素の擬似プレースホルダー要素のスタイルを設定する方法については何も言及していません。

基本的に、プレースホルダーテキストのデフォルトのスタイルを変更したいのですが、要素にアクセスできないため、 通常のトリックの袋 は機能しません。

それに到達する方法はありますか？もしそうなら、JSS/React/DOMの同等の記述方法::-webkit-input-placeholder？

htmlcss3material-uijss
9
oligofren

ケース1

labelコンポーネントのTextFieldプロパティに目的のプレースホルダーテキストを配置し、labelClassNameのTextFieldプロパティを使用してカスタマイズします。 InputLabelProps、className、またはclasses属性でstyleを渡すこともできます。

ケース2

labelのTextFieldプロパティの使用を控え、代わりにplaceholderプロパティにプレースホルダーテキストを配置します。生成されたHTML InputProps要素のクラスをオーバーライドするには、inputに依存します。

コード

以下のコードは、前述の両方のケースをカバーしています。 CodeSandboxスニペット 。

import React from 'react';
import TextField from 'material-ui/TextField';
import { withStyles } from 'material-ui/styles';
import withRoot from '../components/withRoot';

const styles = {
  'input-label': {
    textOverflow: 'Ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: '100%',
    color: 'red'
  },

  'input': {
    '&::placeholder': {
      textOverflow: 'Ellipsis !important',
      color: 'blue'
    }
  }
};

class Index extends React.Component {
  render() {
    return <div style={ {width: 150, margin: '0 auto'} }>
      {/* Uses "label" and "labelClassName". */}
      <TextField
        fullWidth
        label='I am a really really long red TextField label'
        labelClassName={ this.props.classes['input-label'] } />

      {/* Uses "label" and InputLabelProps" with inline styles. */}
      <TextField
        fullWidth
        label='I am a really really long green TextField label'
        InputLabelProps={{
          style: {
            textOverflow: 'Ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            width: '100%',
            color: 'green'
          } }} />

      {/* Uses "placeholder" and "InputProps" with "classes". */}
      <TextField
        fullWidth
        margin='normal'
        placeholder='I am a really really long glue TextField label'
        InputProps={{ classes: {input: this.props.classes['input']} }} />
    </div>;
  }
}

export default withStyles(styles)(Index);
13
Rafa

内部入力要素にアクセスする方法に対する適切な答えは見つかりませんでしたが、JSSを使用してプレースホルダー要素をターゲットにする方法については、答えが見つかりました in the source of the Input要素。TextFieldは構成されます。

基本的に、引用符で囲まれたまっすぐなCSS名を使用しています：'&::-webkit-input-placeholder': { color: 'blue' }

2
oligofren

cssの::placeholderセレクターを使用して入力にスタイルを追加できます

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
1
satyajit rout

アプリの最上位で入力のスタイルを設定できます。これにより、スタイルを適用したカスタム入力コンポーネントを作成する必要がなくなります（他の回答で提案されています）。

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";

const customTheme = createMuiTheme({
overrides: {
  MuiInput: {
    input: {
      "&::placeholder": {
        color: "gray"
      },
      color: "white", // if you also want to change the color of the input, this is the prop you'd use
    }
  }
});

// Render it like this
<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>
1
ninjaPixel

次のコードを使用して、プレースホルダースタイルを適用できます。

const styles = (theme: any) => createStyles({
input: {
    '&::placeholder': {
      fontStyle: 'italic',
    },
  },
});

<TextField
  margin="normal"
  variant="outlined"
  placeholder="Filter..."
  InputProps={{
    classes: { input: classes.input}
  }}
/>
0
Srihari