小编Mah*_*esh的帖子

我正在尝试使用 css 属性旋转 Material-ui 图标animation，但没有得到所需的结果。有人可以帮我确定这里出了什么问题吗？

https://codesandbox.io/s/nifty-nightingale-v8sqh?file=/App.tsx

我的期望是一个连续旋转的图标。

我正在使用 create-react-app 并为 eslint 配置了我的项目。下面是我的 .eslintrc 文件。

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "react-hooks"
  ],
  "extends": [
    "plugin:prettier/recommended",
    "airbnb-typescript-prettier",
    "prettier",
    "plugin:import/typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    // Make prettier code formatting suggestions more verbose.
    "prettier/prettier": [
      "warn"
    ],
    "camelcase": "warn",
    "no-console": "error",
    "no-prototype-builtins": "warn",
    "arrow-body-style": "warn",
    "prefer-arrow-callback": "warn",
    "jsx-a11y/click-events-have-key-events": "warn",
    "jsx-a11y/no-noninteractive-element-interactions": "warn",
    // Disable <Fragment> => <> replacement. Feel free to change
    "react/jsx-fragments": "off",
    "react/destructuring-assignment": "warn",
    "react/no-unused-prop-types": "warn",
    //TODO: Remove this rule later
    "react/jsx-props-no-spreading": "off", …

我们从用户体验团队那里获得了样式指南，该指南通常提到颜色的十六进制代码。例如

Primary Color : #F27132;
Hower color : #D16605;

基于这些值，我们需要创建样式表（.scss文件）。SCSS使用像一些功能$lighten，$darken，$saturate，$desaturate等有没有办法将这些十六进制代码转换成这种相对格式？就像是，

$primary-color : #F27132
$hower-color : $darken($primary-color, 20%)

有什么工具可以进行这种转换吗？

我正在使用如下所述的应用程序结构

index.ts
|-app.module.ts
|-app.component.ts
|--hero (directory)
   |-hero.module.ts
   |-hero.ts (Data Object)
   |-hero.service.ts
   |-hero.component.ts
   |-index.ts (this file exports data obj, service, component & module)
|--dashboard (directory)
   |-dashboard.module.ts
   |-dashboard.component.ts
   |-index.ts (this file exports module and component)

我希望在仪表板组件中使用英雄服务.下面是我正在使用的代码片段,它按预期工作.但不确定它是否是一个好习惯.

import { Component, OnInit } from '@angular/core';

import { Hero, HeroService } from '../hero/index';
import {Router} from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    templateUrl: 'dashboard.component.html',
    styleUrls: ['dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    heroes: Hero[] = [];

    constructor(private heroService: HeroService, private router: Router) { } …

我正在将react-hook-form与typescript和material-ui一起使用。我想将错误消息作为helperTextto传递TextField。我尝试使用这样做， helperText={errors.email?.message} 但打字稿抱怨这个作业。

Property 'email' does not exist on type 'NestDataObject<FormData>'.ts(2339)

我不想从我的 .eslintrc 文件中禁用此规则，因为它可能会忽略我的应用程序中的其他类似问题，而这在某些地方可能是需要的。将react-hook-form的错误消息作为helperText分配给material-ui组件的正确方法是什么？

codesandbox 链接 https://codesandbox.io/s/material-ui-react-form-hook-yi669

我是 Material-ui 新手。我正在尝试自定义Autocomplete组件@material-ui/labs。我想隐藏字段标签。有人可以帮我定制同样的吗？我尝试hiddenLabel="true"向自动完成元素添加标志，但它不起作用。以下是沙盒链接。 https://codesandbox.io/s/material-demo-jwmp2

我正在尝试将电子邮件验证应用于 mat-chip。以下是我实现相同目标的尝试。

https://stackblitz.com/edit/mat-chip-demo-yvmxsk

我的要求是在用户输入无效的电子邮件 ID 时显示 mat-error 并仅突出显示无效的电子邮件 ID。有人可以帮助我吗？

默认情况下，当用户单击标题中的任意位置时，Angular 扩展面板会展开。但是我想更新此功能，以便只有右侧箭头按钮才能触发扩展事件。有人可以帮助我实现这一目标吗？下面是示例代码。 https://stackblitz.com/edit/angular-exp-panel-click

<button (click)="panel1.toggle()" mat-raised-button>Toggle panel 1</button>
<button (click)="panel2.toggle()" mat-raised-button>Toggle panel 2</button>

mat-accordion 外部的按钮可以正确扩展所需的面板，但是在标题内添加相同的按钮时无法按预期工作。

我正在使用 Menu frommaterial-ui并想更改背景颜色。问题是，当我为菜单赋予颜色时，它会在出现菜单弹出窗口时更改整个页面背景。当我将颜色应用于菜单项时，它会在顶部和底部留下一些灰色阴影，因为所有这些菜单项都包含在一个 div 中。问题沙箱：https : //codesandbox.io/s/material-ui-dropdown-background-color-g88e1

更改菜单背景颜色的正确方法是什么？

我试图createMuiTheme改变这一点，但它改变了我的应用程序中所有菜单的颜色。我只想将此样式应用于其中一个菜单项。所以寻找解决方案来使用makeStyle