时间戳

首页 > 解决方案 > 在 Material-ui 中使用 mixins 自定义 React 中的组件

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

问题描述

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

根据此页面的信息：

要自定义文本字段任何部分的颜色，请使用以下 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) {

}

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

标签： javascriptcssreactjssassmaterial-ui

解决方案

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

推荐阅读