40

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

基本上，我想更改占位符文本的默认样式，而普通的技巧包不起作用，因为我无法访问该元素。

有没有办法我可以得到它？如果是这样，JSS/React/DOM 等效的编写方式是::-webkit-input-placeholder什么？

4

9 回答 9

46

情况1

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

案例2

避免使用labelof 的属性，而是TextField将占位符文本放在其属性上。placeholder利用InputProps覆盖生成的 HTMLinput元素的类。

代码

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

编辑

如果您想个性化一个特定的组件实例，以前的解决方案是很好的。要全局更改占位符，请参阅ninjaPixel 的答案。

于 2018-01-31T15:19:44.120 回答
17

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

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>
于 2019-09-18T15:11:38.963 回答
12

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

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

<TextField
  margin="normal"
  variant="outlined"
  placeholder="Filter..."
  InputProps={{
    classes: { input: classes.input}
  }}
/>
于 2019-08-21T10:18:37.100 回答
8

在 TextField 上使用 InputLabelProps

<TextField
   InputLabelProps={{
      style: { color: '#fff', some other Styles }, 
   }}
/>
于 2020-10-27T15:21:06.417 回答
4

您可以使用::placeholder选择器css将样式添加到输入中

::-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;
}
于 2017-12-14T07:37:17.233 回答
3

要在焦点集中时仅设置顶部没有标签的占位符的样式 - 请执行以下操作：

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

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

    return (
         <TextField
              ...
              InputLabelProps={{
                   classes: {
                       root: classes.label,
                   }
              }}
         />
    )
}
于 2021-01-18T20:42:49.223 回答
3

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

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

于 2017-12-14T01:30:56.947 回答
0

无论您使用的是轮廓变体、填充变体还是标准变体，您所指的占位符实际上是标签而不是 ::placeholder。您可以sx在最新的 MUI 版本中使用。

<TextField
    label="Username"
    variant="standard"
    sx={{ input: { color: "yellow" }, "label": {color: "blue"} }} 
/>
于 2022-02-26T15:28:24.367 回答
-3

对于样式化的组件，我只使用：

const StyledTextField = styled(TextField)`
    label {
        font-style: italic;
    }
`;
于 2020-06-01T16:28:28.407 回答