Using mixins in material-ui to customize components in React

Question

I am trying to customize a textfield component in Material-ui with React.

According information from this page:

To customize the colors of any part of the text-field, use the following mixins. We recommend you apply these mixins within CSS selectors like .foo-text-field:not(.mdc-text-field--focused) to select your unfocused text fields, and .foo-text-field.mdc-text-field--focused to select your focused text-fields. To change the invalid state of your text fields, apply these mixins with CSS selectors such as .foo-text-field.mdc-text-field--invalid.

I tried to use this mixin to changed the color of the border:

mdc-text-field-outline-color($color): Customizes the border color of the outlined text field.

However, I have no idea how to use this. I installed scss, but I don't get the syntax of setting the color to red with scss.

@mixin mdc-text-field-outline-color($color) {

}

It seems like I start with something like this, but not sure how to move on without a specific example.

Answer 1

This will help you. You can pass colors as a map. Or pass a single color and use darken and lighten functions; the choice is yours how you want to pass property values.

Example 1

@mixin mdc-text-field-outline-color() {
  & {
    &.mdc-text-field--focused {
      border-color: blue;
    }
    &.mdc-text-field--invalid {
      border-color: gray;
    }
    &:not(.mdc-text-field--focused) {
      border-color: black;
    }
  }
}


.foo-text-field {
  @include mdc-text-field-outline-color();
  border-width: 2px;
  border-style: solid;
}

Example 2

@mixin mdc-text-field-outline-color($color) {
  & {
    &:not(.mdc-text-field--focused) {
      border-color: #{$color};
    }
    &.mdc-text-field--focused {
      border-color: darken($color, 20%);
    }
    &.mdc-text-field--invalid {
      border-color: lighten($color, 20%);
    }
  }
}


.foo-text-field {
  @include mdc-text-field-outline-color(#C4C4);
  border-width: 2px;
  border-style: solid;
}