小编Edr*_*ric的帖子

Material.io 有一个很棒的工具，称为材质调色板生成器：https://material.io/design/color/#tools-for-picking-colors。使用它，您可以选择主要颜色和次要颜色，然后单击链接“在颜色工具中查看”，该链接会将您带到一个页面，您可以在其中以不同方式查看您的选择：https ://material.io/resources/color /#!/?view.left=0&view.right=0&primary.color=6002ee&secondary.color=c63131。

但似乎没有一种简单的方法可以将调色板导出为可用于生成自定义 Angular Material 主题的格式。他们有一个导出链接，但最接近的格式似乎是 CodePen。但是一旦你在CodePen中打开它，CSS似乎没有你需要的调色板信息。

我的问题：有人尝试过这些工具吗？是否有从 Material 调色板到 Angular Material 自定义主题的预先建立的途径？或者说他们没有关系？如果不相关，是否有一种简单的方法将前者所需的颜色代码复制到后者？

谢谢。

我最近更新了我的 SDK，下载了最新的 API 21，删除了支持库，因为 appcompat 项目不存在，安装了它，我导入了 appcompat，就像谷歌要我做的一样（复制到我的工作区，添加每个 jar 来构建路径，配置的构建路径等）。

现在我在android-support-v7-appcompat -> res -> values-v21 -> styles_base.xml, 中遇到错误：

<style name="Base.Widget.AppCompat.ActionButton"
        parent="android:Widget.Material.ActionButton">
</style>

错误是：

错误：检索项目的父项时出错：找不到与给定名称“android:Widget.Material.ActionButton”匹配的资源。

任何解决方案？

我试图在我的组件中插入一个输入字段angular-material2.这是我的HTML:

<md-form-field>
    <input type="text">
</md-form-field>

在控制台中,我收到此错误但我不明白为什么我收到错误:

md-form-field必须包含MdFormFieldControl.您是否忘记将mdInput添加到本机输入或textarea元素？

我尝试在此处跟进有关如何设置角度材料步进器的步骤：https : //material.angular.io/components/stepper/overview

我想要一个包含多个步骤的简单表单，所以我创建了这个：

<form [formGroup]="formGroup">
  <mat-horizontal-stepper formArrayName="formArray" linear>
    <mat-step formGroupName="0" [stepControl]="formArray.get([0])">
      <div>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
    <mat-step formGroupName="1" [stepControl]="formArray.get([1])">
      <div>
        <button mat-button matStepperPrevious type="button">Back</button>
        <button mat-button matStepperNext type="button">Next</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

我进入我的控制台：

ERROR Error: Cannot find control with name: 'formArray'
    at _throwError (forms.es5.js:1918)
    at setUpFormContainer (forms.es5.js:1891)
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addFormArray (forms.es5.js:4849)
    at FormArrayName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormArrayName.ngOnInit (forms.es5.js:5134)
    at checkAndUpdateDirectiveInline (core.es5.js:10856)
    at checkAndUpdateNodeInline (core.es5.js:12364)
    at checkAndUpdateNode (core.es5.js:12303)
    at debugCheckAndUpdateNode (core.es5.js:13167)
    at debugCheckDirectivesFn (core.es5.js:13108)
    at Object.eval [as updateDirectives] (MystepperComponent.htm

我的测试的完整源代码在这里：github上的angular stepper …

我需要更改材质 css 单选按钮颜色（间隙类型为橙色）

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

.with-gap[type="radio"].filled-in:checked + label:after{
     border: 2px solid #ff9800;
     background-color: #ff9800;
}  

<p>
  <input class="with-gap" name="group1" type="radio" id="test3"  />
  <label for="test3">Green</label>
</p>

我开始在我的一个项目中使用 Material。查看<mat-autocomplete>文档网站的示例...

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <span>{{state.name}}</span> |
  </mat-option>
</mat-autocomplete>

ts：

    export class AutocompleteOverviewExample {        
      stateCtrl = new FormControl();
      filteredStates: Observable<State[]>; 
      states: State[] = [
            { name: 'Arkansas'  },
            ...
            { name: 'Texas' }
          ];

          constructor() {
            this.filteredStates = this.stateCtrl.valueChanges
              .pipe(
                startWith(''),
                map(state => state ? this._filterStates(state) : this.states.slice())
              );
          }

          private _filterStates(value: string): State[] {
            const filterValue = value.toLowerCase();
            return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) …

我遇到了一个问题，我需要为*ngFor角度4中的循环内的每个数据行提供唯一的id值。

我的代码是这样的：

<div *ngFor="let row of myDataList">
  <div id="thisNeedsToBeUnique">{{ row.myValue }}</div>
</div>

我有一个 Angular 项目，我在其中使用了 Angular 材质和材质表。

由于名为 .ng-tns-c5-1 或 .ng-tns-c6-1 等的类，我的表格中的所有文本似乎都应用了 10px 的顶部和底部边距。

如果不检查元素，找到该类，然后使用 CSS 更改该边距，我就找不到更改这些边距的方法。

但是在对应用程序上的其他元素进行一些更改后，.ng-tns-c6-1（例如）更改为类似：.ng-tns-c4-0 然后我必须更改它。问题是我现在已经这样做了 5-6 次，这完全是痛苦的。

正因为如此，桌子上有很多无用的空白区域，整体上让事情看起来很糟糕。

那类是什么，我该怎么做才能确保边距保持在我设置的 2-3 像素？

这是我的 CSS 中的类型：

.ng-tns-c5-1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c5-0 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c6-1 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.ng-tns-c4-0 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

产生一个OutlineButton带有白色边框的：

OutlineButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.purple
    )
  ),
)

生成FlatButton带有紫色边框的 a：

FlatButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.purple
    )
  ),
)

部分文档OutlineButton：

边界边？BorderSide 定义按钮启用但未按下时边框的颜色，以及边框轮廓的宽度和样式。[...] 最终的

我有一个使用 React 和 Material UI 构建的应用程序。在一个视图中可以有多个文本字段和多个按钮。现在，当我将焦点放在一个文本字段上然后按下时，Tab我无法可靠地预测哪个控件将成为下一个获得焦点的控件。我想首先浏览所有文本字段，然后再浏览所有按钮。

<DialogContent>
    <DialogContentText>
        The username and password that were used are incorrect. Please provide the correct credentials in order to login to the API.
        <Stepper activeStep={this.state.credentialsStep} orientation='vertical'>
            {
                this.steps.map((label, index) => (
                    <Step key={label}>
                        <StepLabel>{label}</StepLabel>
                        <StepContent>
                            <Typography>{this.stepContent[index]}</Typography>
                            {this.stepAction[index]}
                            <Grid container direction='row' className='m-t-26'>
                                <Button color='primary'
                                        onClick={() => {
                                    this.state.credentialsStep === 0 ? this.onClickCancel() : this.onClickBack();
                                }}>
                                    {this.state.credentialsStep === 0 ? 'Cancel' : 'Back'}
                                </Button>
                                <Button variant='contained'
                                        color='primary'
                                        onClick={() => {
                                    this.state.credentialsStep === this.steps.length - …