标签: material-ui

我正在使用 Material UI 构建一个 React 应用程序。

如果按钮被禁用，它是灰色且不透明的。我希望它是我的主题原色和不透明。

所以这是我尝试过的：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    ":disabled": {
      backgroundColor: theme.palette.primary || 'red'
    }
  }
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        disabled
        className={classes.button}
      >
        Disabled
      </Button>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ContainedButtons);

但按钮保持灰色。如何更改禁用元素的样式？

我需要为我的徽章组件添加自定义颜色，但它似乎不起作用

我试过这些

<Badge className="badge" badgeStyle={{backgroundColor: '#00AFD7'}} variant="dot" />

<Badge className="badge" color='#00AFD7' variant="dot" />

这些都行不通。如何将自定义颜色传递给我的徽章组件

我正在尝试以编程方式更改 Material-ui 芯片的颜色，但运气不佳。根据Chip Api，您必须通过 color 属性使用枚举中的三个值之一设置颜色；默认、主要和次要。然后您应该能够覆盖 colorPrimary 或 colorSecondary css 类，并且背景颜色应该改变。

这是我的代码示例：

<Chip key={label.id} color='primary' classes={{ colorPrimary: label.color }} label={label.label} />

以及浏览器中元素的图片： https: //i.imgur.com/bWYGzzz.png 还不能内联 :(

如果您查看所选元素，您将看到我尝试应用的正确颜色 #ff0000，因此它正在获取颜色并将其放在某处。

我已经尝试过这种变体，添加了 colorBackground 属性，但是我收到一条错误消息，指出 colorPrimary 类需要一个字符串而不是一个对象

<Chip key={label.id} color='primary' classes={{ colorPrimary: { backgroundColor: label.color } }} label={label.label} />

再次重申我的目标：我想对芯片应用十六进制代码颜色以更改背景颜色。

任何信息都有帮助谢谢！

我正在尝试从 material-ui 向 Select 组件添加一个 onChange 事件处理程序：

<Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={values.country}
      onChange={handleCountryChange}
    >
      {countries.map(c => {
        return (
          <MenuItem value={c}>{c}</MenuItem>
        )
      })}
    </Select>

和我的事件处理程序：

const handleCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setValues({...values, country: event.target.value});
  };

但我收到以下错误：

类型 '(event: ChangeEvent) => void' 不能分配给类型 '(event: ChangeEvent<{ name?: string | undefined; value: unknown; }>, child: ReactNode) => void'。

怎么了？

目前正在尝试在Formik 中使用 Material UI 的自动完成组件。到目前为止，诸如文本字段和 Material-UI 中的传统选择之类的东西在 Formik 中表现得非常好。实现自动完成并非如此。Formik 的 onChange 处理程序似乎没有更新我的city_id. 我知道 Autocomplete 仍然不是 Material-UI 的核心库的一部分，但目前仍在观察是否有可能发生这样的事情。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from 'formik';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Button from '@material-ui/core/Button';

import { cities } from '../data/cities';

import "./styles.css";

const initialValues = {
  city_id: '',
};

const submit = params => {
  alert(`Value for city_id is: ${params.city_id}`);
};

function App() {
  return ( …

所以，我正在尝试使用 Formik 和 Material UI 创建表单。对于所有字段，一切正常，但问题在于自动完成。我找不到从 localStorage 填充该字段的方法。我尝试了所有方法，从放置 value props、inputValue、defaultValue 等，但似乎没有任何效果。

import React from 'react'
import { Grid } from '@material-ui/core'
import { Autocomplete } from '@material-ui/lab'
import { Formik, Form, Field } from 'formik'
import { TextField } from 'formik-material-ui'
import * as yup from 'yup'
import { nationality } from '../../constants/nationality'
import Button from '../Button/Button'

export default function ForeignAddress () {

  let localStorageData = localStorage.getItem('foreignAddress'),
    retrivedData = JSON.parse(localStorageData)


  const handleNextClick = () => {
    console.log('clicked next')
  }

  const …

在生产版本上尝试访问我的 MERN 应用程序的登录组件时，我收到一系列如下图所示的类型错误：

我的应用程序 ( https://github.com/ahaq0/kumon_schedule ) 在本地运行良好，今天早些时候托管在 Heroku 上运行良好。

我尝试回滚我今天所做的代码中的所有更改，但无济于事。同样，我检查了 package.json（和 .lock）以查看是否更改了材质 UI 依赖项，但结果是一样的。我似乎无法弄清楚为什么它在此处的托管版本上突然停止工作。

错误行的代码如下。但是，我没有写，因为它是 Material UI 的一部分。

if (sheetManager.dynamicStyles) {
    var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
        link: true
    }, options));
    dynamicSheet.update(props).attach();
    state.dynamicSheet = dynamicSheet;
    state.classes = mergeClasses({
        baseClasses: sheetManager.staticSheet.classes,
        newClasses: dynamicSheet.classes
    });

    if (sheetsRegistry) {
        sheetsRegistry.add(dynamicSheet);
    }
} else {
    state.classes = sheetManager.staticSheet.classes;
}

sheetManager.refs += 1;

这是我第一个部署的应用程序，尽管我尽了最大努力回滚，但我对一切如何从工作到不工作感到茫然。

编辑。我应该提到我在 Firefox 以及错误日志来自的 Chrome 中进行了测试。

编辑#2。经过大量调试后，我发现如果我回滚到通过 Heroku 提交 fccc55a5，错误就会消失。但是，如果我使用该提交创建一个新分支并尝试部署该分支，它将无法正常工作。

请看这里 https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5

当我恢复到 Heroku 中的最后一次构建时，它将起作用。但是如果我将之前的提交合并到一个新分支并尝试部署它，它不会。

我已经使用 react 一段时间了，我知道 Material UI https://material-ui.com/是为 react 构建的 UI 库。我的问题是 - 是否可以将这个库（为反应而构建）与 react-native 一起使用？

在一些研究中，我发现 react-native 有另一个名为 react-native-paper 的 UI 库，但我想知道 Material-UI 是否可以与 react-native 结合在一起？

我正在尝试使用自定义Material-UI Autocomplete组件并将其连接到react-hook-form.

TLDR：需要使用带有 react-hook-form 控制器的 MUI 自动完成而不需要 defaultValue

我的自定义Autocomplete组件采用具有结构的对象，{_id:'', name: ''}它显示名称并_id在选择选项时返回。该Autocomplete工作得很好。

<Autocomplete
  options={options}
  getOptionLabel={option => option.name}
  getOptionSelected={(option, value) => option._id === value._id}
  onChange={(event, newValue, reason) => {
    handler(name, reason === 'clear' ? null : newValue._id);
  }}
  renderInput={params => <TextField {...params} {...inputProps} />}
/>

为了使工作与react-hook-form我设置的setValues是处理程序onChange中Autocomplete，然后手动注册该组件在useEffect如下

useEffect(() => {
  register({ name: "country1" });
},[]);

这工作正常，但我想没有useEffect钩子，只是直接以某种方式使用寄存器。

接下来我尝试使用Controller组件 …

我正在尝试使用定义为 css 变量的现有颜色创建一个材质 ui 主题my-pallette.scss：

:root {
  --primary-color: '#FF0000';
  ...
}

并像这样使用它：

import { createMuiTheme } from '@material-ui/core/styles';

export const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: 'var(--primary-color)',
    },
  },
});

这会引发错误：

未捕获的错误：Material-UI：不支持的var(--primary-color)颜色。我们支持以下格式：#nnn、#nnnnnn、rgb()、rgba()、hsl()、hsla()。

根据此 Github 线程：支持 CSS 变量作为主题选项，目前尚不支持。

有什么解决方法可以让我在 Material ui中用var(--primary-color)作主色createMuiTheme吗？

最终目标是以最简单的形式使用材质 ui 组件，其主要、次要等颜色被我的颜色覆盖。

<Radio color="primary" />

我尝试使用我的托盘中的颜色，如下所示：

const cssVariables = {
  primaryColor: getComputedStyle(document.documentElement).getPropertyValue('var(--primary-color)'),
};

并使用cssVariables.primaryColor但这不起作用并且感觉非常违反直觉。

我的最后一个解决方案是将调色板复制为普通对象，并按原样使用它，但这对于维护来说似乎是一场噩梦。