在TextField中设置占位符的样式

问题描述

TextField API没有提及关于样式设置的任何内容输入元素的伪占位符元素.

The TextField API doesn't mention anything about how one could style the pseudo placeholder element of the input element.

基本上，我想更改占位符文本的默认样式，然后普通的花招不起作用，因为我无法访问该元素.

Basically, I would like to change the default styling of the placeholder text, and the normal bag of tricks doesn't work, as I cannot access the element.

有什么办法可以做到这一点吗?如果是这样，写::-webkit-input-placeholder的JSS/React/DOM等效方式是什么?

Is there a way I can get to it? And if so, what is the JSS/React/DOM equivalent way of writing ::-webkit-input-placeholder?

推荐答案

案例1

在TextField组件的label属性中放入所需的占位符文本，并使用TextField的labelClassName属性对其进行自定义.您也可以使用className，classes或style属性传递InputLabelProps.

Put the desired placeholder text in the label property of the TextField component, and use the labelClassName property of the TextField to customize it. You could also pass InputLabelProps with a className, classes or style attribute.

案例2

不要使用TextField的label属性，而是将占位符文本放在其placeholder属性中.利用InputProps覆盖生成的HTML input元素的类.

Refrain from using the label property of TextField and put the placeholder text on its placeholder property instead. Leverage InputProps to override the generated HTML input element's class.

代码

下面的代码涵盖了上述两种情况. CodeSandbox代码段.

The code below covers both aforementioned cases. CodeSandbox snippet.

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

这篇关于在TextField中设置占位符的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！