javascript - 使用material-ui中的mixins来自定义React中的组件

Question

我正在尝试使用 React 在 Material-ui 中自定义文本字段组件。

根据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.

我尝试使用这个 mixin 来改变边框的颜色:

mdc-text-field-outline-color($color):自定义轮廓文本字段的边框颜色。

但是，我不知道如何使用它。我安装了scss，但我没有得到使用scss 将颜色设置为红色的语法。

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

}

我似乎从这样的事情开始，但不确定如何在没有具体示例的情况下继续。

Answer 1

这会对你有帮助。 您可以将颜色作为 map 传递。或者传递单一颜色并使用 darken 和 lighten 函数；您可以选择如何传递属性值。

示例 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;
}

示例 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;
}