在 TextField 中设置占位符的样式

Posted 2023-02-22

【中文标题】在 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 属性中，并使用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。

【参考方案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 名称，只是用引号括起来： '&::-webkit-input-placeholder': color: 'blue'