在 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
属性中,并使用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'
【讨论】:
以上是关于在 TextField 中设置占位符的样式的主要内容,如果未能解决你的问题,请参考以下文章