在material-ui中使用mixins来定制React中的组件

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

根据此页面上的信息：

要自定义文本字段任何部分的颜色，请使用以下混合。我们建议您在CSS选择器（例如.foo-text-field：not（.mdc-text-field--focused））中应用这些mixin来选择未聚焦的文本字段，以及.foo-text-field.mdc-text-field- -focused以选择您要关注的文本字段。要更改文本字段的无效状态，请使用CSS选择器（如.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) {

}

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