小编Har*_*iya的帖子

Typescript 模块增强不起作用:类型“PaletteColorOptions”上不存在属性“main”

我一直在研究 Material-UI 并尝试在整个调色板中使用颜色系统。尽管在运行时运行良好,但编译时似乎存在一些问题。有人可以帮我解决以下错误:

错误:

类型“PaletteColorOptions”上不存在属性“main”。
类型“Partial”上不存在属性“main”。(2339)

这里也是 stackblitz:https://stackblitz.com/edit/react-up6bjl-hx1bbh ?file=demo.tsx

代码:

import * as React from 'react';
import {
  createTheme,
  Theme,
  ThemeProvider,
  PaletteOptions
} from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';

declare module '@material-ui/core/styles' {
  interface SimplePaletteColorOptions {
    lighter?: string;
    darker?: string;
  }

  interface PaletteColor {
    lighter?: string;
    darker?: string;
  }
}

const Default = () : PaletteOptions => {

  return {
    primary: {
      lighter: '#ddd',
      light: '#ddd',
      main: '#ddd',
      dark: '#ddd',
      darker: '#ddd'
    },
  };
};

export default function CustomColor() …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs material-ui react-typescript

8
推荐指数
1
解决办法
7551
查看次数

禁用 MUI 按钮上的波纹效果并添加自定义

我想删除按钮上的波纹效果并在 MUI 按钮中实现我的自定义效果。我已经使用disableRipple删除了波纹。我尝试在用户单击某个元素时应用阴影,但不知何故它不起作用。

\n
import * as React from "react";\nimport Button from "@mui/material/Button";\nimport { alpha } from "@mui/material/styles";\n\nexport default function DefaultProps() {\n  return (\n    <Button\n      variant="outlined"\n      // className=\'Mui-focusVisible\'\n      disableRipple\n      sx={{\n        "&:hover": {\n          boxShadow: `0px 0px 0px 0px ${alpha("#000", 0.16)}`\n        },\n        "&.Mui-focusVisible": {\n          boxShadow: `0px 0px 0px 50px ${alpha("#000", 0.16)}`\n        },\n        "&.Mui-active": {\n          boxShadow: `0px 0px 0px 8px ${alpha("#000", 0.16)}`\n        }\n      }}\n    >\n      Change default props\n    </Button>\n  );\n}\n
Run Code Online (Sandbox Code Playgroud)\n

我已经使用 Mui-focusVisible 在单击时应用阴影,如此处提到的是文档

\n
\n

disableRipple bool false
\n如果为 …

javascript css css-animations reactjs material-ui

7
推荐指数
2
解决办法
2万
查看次数

如果在页面中使用两次相同的控制器,则停止反映彼此的模型

我在我的页面中使用了mvc部分控制两次搜索功能.它有自己的控制器来搜索,所以我的页面有两个同名的控制器.

<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
     <div id="search1">
        @Html.Partial("_SearchPartial") // say it search1
        // some other code to show search results
        // ....               
        // ..
     </div>
     <div id="search2">
        @Html.Partial("_SearchPartial") // say it search2
        // some other code to show search results
        // ....               
        // ..
     </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是_SearchPartial:

<form name="SearchCommon">
    <div ng-model="search" ng-controller="SearchPartialController">
            <div>
                <input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
            </div>

            <div>
                <input type="text" value="" placeholder="Make" ng-model="search.Make" />
            </div>

            <div>
                <input type="text" value="" placeholder="Year" ng-model="search.Year" />
            </div>

            <div>
                <input type="submit" value="SEARCH" …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

5
推荐指数
1
解决办法
95
查看次数