如何设置material-ui文本字段的样式

Posted 2023-02-22

【中文标题】如何设置material-ui文本字段的样式

【英文标题】：How to style material-ui textfield

【发布时间】：2018-04-08 13:11:54

【问题描述】：

我一直在研究如何设置material-ui TextField 组件的样式。

<TextField
    id="email"
    label="Email"
    className=classes.textField
    value=this.state.form_email
    onChange=this.handle_change('form_email')
    margin="normal"
/>

我的类是这样创建的：

const styles = theme => (
    textField: 
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    ,
);

我的问题是我似乎无法将文本字段的颜色更改为白色。我似乎能够将样式应用于整个文本字段（因为宽度样式等）......但我认为问题在于我没有将样式应用到链的更下游并应用到实际输入中。

我试图查看其他有关传递 inputProps 的答案，但没有成功。

尽我所能尝试了一切，但我想我需要问问是否有人知道我做错了什么。

现在的样子

【参考方案1】：

您需要将InputProps 属性添加到TextField。

const styles = theme => (
    textField: 
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',            
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    ,
    input: 
        color: 'white'
    
);

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,
    
/>

顺便说一句，您还可以设置标签的样式或使用覆盖，如here 所述。

【讨论】：

这两个classNames有什么不同，换句话说，为什么MUI需要不止一个？ （例如 white 颜色从主题进入 textField CSS 规则？

谢谢，效果很好。 Material-UI 文档没有明确告知您必须使用 InputProps 来设置文本字段的样式。

【参考方案2】：

这里的所有答案都显示了如何使用 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.
       
    
/>

这是一个working codesandbox，展示了上面的想法。

【讨论】：

感谢终于有人解释了。如果您能解释一下为什么样式道具有时会起作用，那就太好了（例如：，margin 有效但颜色无效......再次感谢

@NielsDominguez 您所描述的与 Material-Ui 无关，而是与 CSS 的工作方式有关，当您向组件添加样式并且该样式不起作用时，这意味着正在应用一些更具体的样式到那个规则 - 基于 css 特异性规则。

@NielsDominguez 无论如何请注意，您的示例 无论如何都不起作用，因为您将 style 作为道具传递给 TextField 组件，并且该组件没有对该 prop.style 进行任何操作，当它们被传递给像 div 这样的本机 dom 元素时，它们被应用为内联样式。当您将它们传递给 React 组件时，React 组件需要像处理任何其他道具一样处理它。通常，材质 ui 组件使用诸如 inputProps 之类的道具将样式传递给底层原生元素。

【参考方案3】：

这是一个内联样式的解决方案：

<TextField
    style=
        backgroundColor: "blue"
    
    InputProps=
        style: 
            color: "red"
        
    
/>

【参考方案4】：

我建议将你的风格保持在一个主题内。

const theme = createMuiTheme(
  overrides: 
    MuiInputBase: 
      input: 
        background: "#fff",
      ,
    ,
  ,
);

【讨论】：

太棒了！如果您使用许多 TextField，这是最好的解决方案。

【参考方案5】：

这真的取决于你到底想改变什么。

文档中有大量关于自定义 TextField 的示例，请在此处查看：

https://material-ui.com/demos/text-fields/#customized-inputs

更多关于定制的信息可以在这里找到：

https://material-ui.com/customization/overrides/

和

https://material-ui.com/customization/themes/

您是否尝试过使用 !important 来更改颜色？当我尝试为概述的 TextField 的边框设置默认颜色时遇到了同样的问题

看看这个：https://stackblitz.com/edit/material-ui-custom-outline-color

【参考方案6】：

您不能将样式传递给层次结构中的任何子元素：

TextField > Input > input (HTML element)

注意InputProps 与inputProps 中的大写或小写

// pass styles (or props) to the Input component 
<TextField InputProps=className: classes.input />

// pass styles (or props) to the inner input element 
<TextField inputProps=className: classes.input />

【参考方案7】：

尝试在TextField 上使用inputStyle 属性。来自docs...

inputStyle (object) - 覆盖 TextField 输入的内联样式 元素。当 multiLine 为 false 时：定义输入的样式 元素。当 multiLine 为 true 时：定义容器的样式 文本区域。

<TextField inputStyle= backgroundColor: 'red'  />

【参考方案8】：

从 MUI V5 开始，您可以使用 sx 属性更改样式设置。您仍然需要使用 inputProps 将这些道具传递给输入字段。你可以考虑这样做：

              <TextField
                sx= marginTop: 10 
                inputProps= sx: color: '#fff'   
              />

The SX prop in MUI V5

【参考方案9】：

尝试使用FilledInput 组件而不是TextField。然后你可以像这样使用简单的内联样式：

style=color: 'white'

这也会使占位符文本变亮...万岁。