在 TextField 中设置占位符的样式

Question

TextField API 没有提及如何设置输入元素的伪占位符元素的样式。

基本上，我想更改占位符文本的默认样式，而the normal bag of tricks 不起作用，因为我无法访问该元素。

有什么方法可以解决吗？如果是这样，JSS/React/DOM 等价的写法是什么::-webkit-input-placeholder？

Answer 1

聚焦时仅设置占位符的样式，而顶部没有标签 - 执行以下操作：

const useStyles = makeStyles(theme => ({
    label: {
         color: 'rgba(0, 0, 0, 0.26)'
    }
}));

const LoginForm = () => {
    const classes = useStyles();

    return (
         <TextField
              ...
              InputLabelProps={{
                   classes: {
                       root: classes.label,
                   }
              }}
         />
    )
}

Answer 2

在 TextField 上使用 InputLabelProps

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

Answer 3

案例 1

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

案例 2

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

代码

下面的代码涵盖了上述两种情况。 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);

编辑

如果您想个性化特定的组件实例，之前的解决方案是不错的选择。要全局更改占位符，请参阅ninjaPixel's answer。

Answer 4

我只使用样式化组件：

const StyledTextField = styled(TextField)`
    label {
        font-style: italic;
    }
`;

Answer 5

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

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 6

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

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

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

Answer 7

您可以使用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;
}

Answer 8

我还没有找到关于如何访问内部输入元素的正确答案，但是关于如何使用 JSS 定位占位符元素，我找到了Input 元素的答案in the source，其中TextField 组成。

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