我正在尝试使用 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) { 
 
} 

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

请您参考如下方法:

这会对你有帮助。 您可以将颜色作为 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; 
}