[英]Using mixins in material-ui to customize components in React
I am trying to customize a textfield component in Material-ui with React. 我正在尝试使用React在Material-ui中自定义文本字段组件。
According information from 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.
我们建议您在CSS选择器(例如.foo-text-field:not(.mdc-text-field--focused))中应用这些混合,以选择未聚焦的文本字段,以及.foo-text-field.mdc-text-field- -focused以选择您要关注的文本字段。 To change the invalid state of your text fields, apply these mixins with CSS selectors such as .foo-text-field.mdc-text-field--invalid.
要更改文本字段的无效状态,请使用CSS选择器(如.foo-text-field.mdc-text-field--invalid)应用这些混合。
I tried to use this mixin to changed the color of the border: 我尝试使用此mixin更改边框的颜色:
mdc-text-field-outline-color($color): Customizes the border color of the outlined text field.
However, I have no idea how to use this. 但是,我不知道如何使用它。 I installed scss, but I don't get the syntax of setting the color to red with scss.
我安装了scss,但是没有得到使用scss将颜色设置为红色的语法。
@mixin mdc-text-field-outline-color($color) {
}
It seems like I start with something like this, but not sure how to move on without a specific example. 似乎我从这样的事情开始,但是不确定没有具体的例子如何继续。
This will help you. 这将为您提供帮助。 You can pass
colors
as a map
. 您可以将
colors
作为map
传递。 Or pass a single color and use darken
and lighten
functions; 或只传递一种颜色并使用
darken
和lighten
功能; the choice is yours how you want to pass property values. 选择取决于您如何传递属性值。
@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;
}
@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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.