在TextField中设置占位符的样式

Question

该文本字段 API没有提及一个可以如何样式输入元素的伪占位符元素任何东西.

基本上,我想更改占位符文本的默认样式,并且正常的技巧包不起作用,因为我无法访问该元素.

有没有办法可以达到目的？如果是这样,JSS/React/DOM等效的写作方式是::-webkit-input-placeholder什么？

Answer 1

情况1

将所需的占位符文本放在组件的label属性中TextField,并使用其labelClassName属性对其TextField进行自定义.你也可以通过InputLabelProps用className,classes或style属性.

案例2

不要使用label属性,而是TextField将占位符文本放在其placeholder属性上.依赖于InputProps覆盖生成的HTML 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);

Answer 2

您可以在应用程序的顶层设置输入的样式，这样您就不必创建应用了样式的自定义输入组件（如其他答案中所建议的那样）。

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>

Answer 3

在 TextField 上使用 InputLabelProps

<TextField
   InputLabelProps={{
      style: { color: '#fff', some other Styles }, 
   }}
/>

Answer 4

您可以使用以下代码应用占位符样式。

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

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

Answer 5

对于如何访问内部输入元素，我还没有找到正确的答案，但是对于如何使用 JSS 定位占位符元素，我在元素的源代码中Input找到了答案，该元素TextField是由该元素组成的。

基本上，它使用直接的 css 名称，只是用引号引起来： '&::-webkit-input-placeholder': { color: 'blue' }