在 Material-ui 中使用 mixins 自定义 React 中的组件答案

【问题标题】：Using mixins in material-ui to customize components in React在 Material-ui 中使用 mixins 自定义 React 中的组件
【发布时间】：2018-11-24 16:18:56
【问题描述】：

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

根据this page的信息：

要自定义文本字段任何部分的颜色，请使用以下 mixins。我们建议您在 CSS 选择器中应用这些 mixin，例如 .foo-text-field:not(.mdc-text-field--focused) 以选择未聚焦的文本字段，以及 .foo-text-field.mdc-text-field- -focused 以选择您的重点文本字段。要更改文本字段的无效状态，请使用 CSS 选择器应用这些 mixin，例如 .foo-text-field.mdc-text-field--invalid。

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

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

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

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

}

似乎我是从这样的事情开始的，但如果没有具体的例子，我不确定如何继续。

【问题讨论】：

很难想象material-components和现在的material-ui是一样的

标签： javascript css reactjs sass material-ui

【解决方案1】：

这将对您有所帮助。您可以将colors 作为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;
}

【讨论】：