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

Posted 2023-02-21

【中文标题】在 Material-ui 中使用 mixins 自定义 React 中的组件

【英文标题】：Using mixins in material-ui to customize components in 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是一样的

【参考方案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;