在 TextField 中设置占位符的样式

Posted

技术标签:

【中文标题】在 TextField 中设置占位符的样式【英文标题】:Styling the placeholder in a TextField 【发布时间】:2018-05-28 00:19:06 【问题描述】:

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

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

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

【问题讨论】:

css-tricks.com/almanac/selectors/p/placeholder 为什么不能访问元素?即使该元素是动态生成的,您的针对它的 CSS 样式仍然适用。 @CasperSL 这只是懒惰。该链接已经是我问题的一部分。 @ObsidianAge 这意味着我必须在 JS 之外编写 CSS,不是吗?而且,它也可能与组件的内部紧密相连,对吧? 【参考方案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,
                   
              
         />
    )

【讨论】:

这是什么答案? 这是我在 TextField 中设置占位符样式的方法【参考方案2】:

在 TextField 上使用 InputLabelProps

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

【讨论】:

我尝试了其他解决方案来更改占位符颜色,但它们不起作用,这对我有用 在尝试了这么多解决方案之后,仅此一项就对我有用。谢谢!【参考方案3】:

案例 1

将所需的占位符文本放在TextField 组件的label 属性中,并使用TextFieldlabelClassName 属性对其进行自定义。您还可以通过 InputLabelProps 传递 classNameclassesstyle 属性。

案例 2

不要使用TextFieldlabel 属性,而是将占位符文本放在其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。

【讨论】:

【参考方案4】:

我只使用样式化组件:

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

【讨论】:

嗨,埃里克。该答案与问题无关。我建议删除它以避免投票。【参考方案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>


【讨论】:

它对我不起作用。相反,您可以添加样式 MuiInput:MuiFormLabel: root: color: 'grey' , 另外我想指出一些这个答案没有提到的东西,如果我以前知道的话,我会花一些时间:你必须注意你的 TextField 的变体。例如。如果是variant='filled',则必须使用MuiFilledInput 而不是MuiInput。除此之外,这个答案很棒,正是我想要的【参考方案6】:

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

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

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

【讨论】:

【参考方案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;

【讨论】:

我并没有普遍询问。这个问题被标记为 material-ui,所以它专门使用 javascript 和 JSS。我现在添加了一个 JSS 标签来进一步强调它,但从我的上一段中应该很清楚。 上面的css选择器是占位符颜色更改的全局属性,你也可以将它用于material-ui 我不想全局更改,太草率了。否则我不会问这个具体的问题。从问题中可以明显看出,我已经知道正确的 CSS 道具。它的目标是包含在很难的 TextField 中的特定伪元素。【参考方案8】:

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

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

【讨论】:

以上是关于在 TextField 中设置占位符的样式的主要内容,如果未能解决你的问题,请参考以下文章

如何在格式字符串中设置占位符的颜色

如何在 JavaFX 中设置占位符?

更改占位符的 css 属性

在 SwiftUI 中设置 TextField 的宽度

联系表 7 中的占位符 - Wordpress

在ios中设置TextInput占位符垂直居中 - React Native