Material UI inline styling - specific component colours

Question

I'm trying to style my TextFields from Material-UI. I have a black background and I need both the textField border and text to be white. Here's my (relevant) code:

render() {
    const styles = {
      width: {
        width: '90%',
        margin: '5px',
        padding: '5px',
        textColor: '#ffffff',
        hintColor: '#ffffff',
        floatingLabelColor: '#ffffff',
        disabledTextColor: '#673ab7',
        focusColor: '#c2185b',
        borderColor: '#ffffff'
      },
      button: {
        margin: '15px',
        padding: '20px',
        width: '60%'
      }
    };

<TextField
              className="classes.textField"
              label="Name Your Vice"
              type="text"
              name="vice"
              value={this.props.vice}
              margin="normal"
              variant="outlined"
              style={styles.width}
              onChange={this.props.handleInputChange}
            />

What am I missing to get this to work?

Thanks

What renders with this code? What doesn’t match with what you were expecting. — Justin Wager, Oct 13 '18 at 15:12
This renders a textfield that has primary styling based on Material-UI's standard theme. Return isn't there because I didn't want to paste all my code as it's irrelevant to the actual issue. — Daniel Cross, Oct 13 '18 at 15:30

score 1 · Answer 1 · answered Oct 15 '18 at 13:23

TextField is an abstraction of several other components. from the documentation:

Advanced Configuration

It's important to understand that the text field is a simple abstraction on top of the following components:

FormControl

InputLabel

List item

Input

FormHelperText

Some of the stylings you are trying to do apply to the Input.

So your code should look a bit like this:

const styles = {
  input: {
    backgroundColor: 'red',
  },
}

< TextField InputProps = {{ style: styles.input }} />

score 1 · Answer 2 · answered Nov 09 '18 at 11:09

1

I found that Material UI required a lot of digging down into the components to make very basic changes. I instead used Materialize (a more friendly version of Material UI) and found it relatively simple to customise my components.

answered Nov 09 '18 at 11:09

Daniel Cross

51
13

score 0 · Answer 3 · answered Oct 15 '18 at 17:06

To set the border and background color with TextField variant "outlined" you need to target the fieldset.

You can do something like this:

const styles = {
  textField: {
    [`& fieldset`]: {
      border:"1px solid #fff",
      backgroundColor: "#fff"
    }
};

Material UI inline styling - specific component colours

3 Answers3

Linked