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

时间:2017-10-27 02:01:41

标签: javascript reactjs material-ui

我一直在努力研究如何设置material-ui.next textfield组件的样式(React JS)。

<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的其他答案,但没有成功。

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

提前感谢您的时间。 问候。安德烈

  

目前的样子

What it currently looks like

8 个答案:

答案 0 :(得分:11)

您需要将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所述设置标签样式或使用替代项。

答案 1 :(得分:2)

尝试使用inputStyle上的TextField道具。来自docs ...

  

inputStyle(object) - 覆盖TextField输入的内联样式   元件。当multiLine为false时:定义输入的样式   元件。当multiLine为true时:定义容器的样式   textarea。

<TextField inputStyle={{ backgroundColor: 'red' }} />

答案 2 :(得分:2)

这是内联样式的解决方案:

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

答案 3 :(得分:2)

这里的所有答案都显示了如何使用InputProps或inputProps设置样式,但没有人解释原因以及它的工作方式。而且没有人解释inputProps和InputProps之间的区别

  output$menu<-renderUI({

    sidebarPanel(width = 2,
                 selectInput("sel","",
                             choices = c("Home","About","Sector A","Sector B","Sector C"),
                             selected = "Home", selectize = FALSE),
                 tags$style(
                   "select#sel {background: #FFA500}"
                 )
    )
  })

最后,这是一个工作代码框,显示了https://codesandbox.io/s/material-ui-drawer-8p6wv

上的想法

答案 4 :(得分:1)

这实际上取决于您要更改的内容。

文档中有许多有关自定义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

答案 5 :(得分:0)

我建议您将样式保留在主题内。

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

答案 6 :(得分:0)

尝试使用FilledInput组件而不是TextField。然后,您可以使用简单的内联样式,如下所示:

style={{color: 'white' }}

这也将简化占位符文本……万岁。

答案 7 :(得分:0)

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

TextField > Input > input (HTML element)

注意InputPropsinputProps的大写或小写

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