Javascript 如何设置 material-ui 文本字段的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46966413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style material-ui textfield
提问by Andre DiCioccio
I have been trying to work out how to style a material-ui TextFieldcomponent.
我一直在努力研究如何设计一个material-ui TextField组件的样式。
<TextField
id="email"
label="Email"
className={classes.textField}
value={this.state.form_email}
onChange={this.handle_change('form_email')}
margin="normal"
/>
My classes are created as follows:
我的课程创建如下：
const styles = theme => ({
textField: {
width: '90%',
marginLeft: 'auto',
marginRight: 'auto',
color: 'white',
paddingBottom: 0,
marginTop: 0,
fontWeight: 500
},
});
My problem is that I can not seem to get the colour of the text field to change to white. I seem to be able to apply styling to the overall text field (because the width styling works etc)... but I think the problem is that I am not applying the styles further down the chain and into the actual input.
我的问题是我似乎无法将文本字段的颜色更改为白色。我似乎能够将样式应用于整个文本字段（因为宽度样式有效等）......但我认为问题在于我没有将样式进一步应用到链中并应用到实际输入中。
I have tried to look at the other answers dealing with passing inputProps but have had no success.
我试图查看处理传递 inputProps 的其他答案，但没有成功。
Have tried everything to the best of my ability but think I need to ask if anyone knows what I am doing wrong.
尽我所能尝试了一切，但我想我需要问是否有人知道我做错了什么。
What it currently looks like
目前的样子
采纳答案by Craig Myles
You need to add the InputPropsproperty to the TextField.
您需要将该InputProps属性添加到 TextField。
const styles = theme => ({
textField: {
width: '90%',
marginLeft: 'auto',
marginRight: 'auto',
paddingBottom: 0,
marginTop: 0,
fontWeight: 500
},
input: {
color: 'white'
}
});
JSX:
JSX：
<TextField
id="email"
label="Email"
className={classes.textField}
value={this.state.form_email}
onChange={this.handle_change('form_email')}
margin="normal"
InputProps={{
className: classes.input,
}}
/>
As an aside, you can also style the label or use an override as described here.
顺便说一句，您还可以设置标签样式或使用此处所述的覆盖。
回答by Jonathan R
This is a solution with inline styles:
这是带有内联样式的解决方案：
<TextField
style={{
backgroundColor: "blue"
}}
InputProps={{
style: {
color: "red"
}
}}
/>
回答by Peter Catalin
It really depends on what exactly are you trying to change.
这真的取决于你到底想改变什么。
The documentation has a bunch of examples on custom TextFields, take a look at them here:
该文档有一堆关于自定义 TextFields 的示例，请在此处查看它们：
https://material-ui.com/demos/text-fields/#customized-inputs
https://material-ui.com/demos/text-fields/#customized-inputs
More information about customization can be found here:
可以在此处找到有关自定义的更多信息：
https://material-ui.com/customization/overrides/
https://material-ui.com/customization/overrides/
and
和
https://material-ui.com/customization/themes/
https://material-ui.com/customization/themes/
Have you tried using !important for the color changes? I had the same problem when I tried to set a default color for the border of an outlined TextField
您是否尝试过使用 !important 来更改颜色？当我尝试为轮廓 TextField 的边框设置默认颜色时遇到了同样的问题
Take a look at this: https://stackblitz.com/edit/material-ui-custom-outline-color
看看这个：https: //stackblitz.com/edit/material-ui-custom-outline-color
回答by Romero Junior
I'd suggest keeping your style within a theme.
我建议将您的风格保持在一个主题中。
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
background: "#fff",
},
},
},
});
回答by ehab
All the answers here shows how to style things with InputProps or inputProps, but no one explained why, and how it works. And no one explained whats the difference between inputProps and InputProps
这里的所有答案都展示了如何使用 InputProps 或 inputProps 设置样式，但没有人解释原因以及它是如何工作的。没有人解释 inputProps 和 InputProps 之间的区别是什么
<TextField
variant="outlined"
// inputProps are used to pass attributes native to the underlying
// HTML input element, e.g. name, id, style.
inputProps={{
style: { textAlign: 'center' },
}
// InputProps (capital I) passes props to the wrapper Material
// component. Can be one of the following: Input, FilledInput,
// OutlinedInput. You can pass here anything that the underlying
// Material component uses: error, value, onChange, and classes.
InputProps={{
// Usually you don't need className, the `classes` object will
// be sufficient. However, you can also use it and this will
// add your class to the div of the InputBase.
className: styles.slider_filter_input,
classes: {
root: classes.root
focused: classes.focused
// The list of keys you pass here depend on your variant
// If for example you used variant="outlined", then you need
// to check the CSS API of the OutlinedInput.
}
}}
/>
Here is a working codesandboxshowing the ideas above.
这是一个显示上述想法的有效代码和框。
回答by Alex
Try using the inputStyleprop on TextField. From the docs...
尝试在inputStyle上使用道具TextField。从文档...
inputStyle (object) - Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea.
inputStyle (object) - 覆盖 TextField 输入元素的内联样式。multiLine 为 false 时：定义输入元素的样式。multiLine为true时：定义textarea的容器样式。
<TextField inputStyle={{ backgroundColor: 'red' }} />
回答by Steve
Try using the FilledInputcomponent instead of TextField. Then you can use simple inline styling like this:
尝试使用FilledInput组件而不是TextField. 然后你可以像这样使用简单的内联样式：
style={{color: 'white' }}
style={{color: 'white' }}
This also will lighten the placeholder text... hooray.
这也将减轻占位符文本...万岁。
