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

IT技术 javascript reactjs material-ui
2021-03-24 17:35:59

我一直在努力研究如何设计一个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 的其他答案，但没有成功。

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

目前的样子

带有蓝色背景和略浅的蓝色标签的文本字段

6个回答

您需要将该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,
    }}
/>

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

谢谢这工作得很好。在让您知道必须使用InputProps样式文本字段时，Material-UI 文档不清楚。
2021-06-02 17:35:59
两者有什么className不同，换句话说，为什么MUI需要不止一个？（相对于例如从主题white进入textFieldCSS 规则的颜色？
2021-06-06 17:35:59

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

这是一个显示上述想法的有效代码和框。

@NielsDominguez 您所描述的与 Material-Ui 无关，而是与 css 的工作方式有关，当您向组件添加样式并且该样式不起作用时，这意味着一些更具体的样式应用于该规则 - 基于 css 特异性规则。
2021-05-22 17:35:59
@NielsDominguez 无论如何请注意，您的示例 <TextField style={{margin: 15, color: 'blue'}} /> 无论如何都不起作用，因为您将样式作为道具传递给 TextField 组件，而该组件没有做任何事情当 prop.style props 传递给原生 dom 元素（如 div）时，它们将作为内联样式应用。当您将它们传递给 React 组件时，该 React 组件需要像处理任何其他道具一样处理它。通常，材质 ui 组件使用像 inputProps 这样的道具将样式传递给底层原生元素。
2021-05-22 17:35:59
谢谢终于有人解释了。如果您能解释为什么样式道具有时会起作用，那就太好了（例如：<TextField style={{margin: 15, color: 'blue'}} />, margin 有效但颜色无效...再次感谢
2021-06-20 17:35:59

这是带有内联样式的解决方案：

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

我建议将您的风格保持在一个主题中。

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#fff",
      },
    },
  },
});
惊人的！如果您使用许多 TextField，这是最好的解决方案。
2021-05-22 17:35:59

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

该文档有一堆关于自定义 TextFields 的示例，请在此处查看它们：

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

其它你可能感兴趣的问题
上一篇用 Jest 模拟的服务导致“不允许 jest.mock() 的module工厂引用任何范围外变量”错误 下一篇更改所有 MUI 组件的字体系列