标签: material-ui

我正在尝试在阅读本教程后将自定义主题应用于我的React组件

http://www.material-ui.com/#/customization/themes

我在一个单独的javascript文件中写了我的主题

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
  spacing: Spacing,
  zIndex: zIndex,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.cyan500,
    primary2Color: Colors.cyan700,
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.pinkA200,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.deepPurpleA700,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
    pickerHeaderColor: Colors.cyan500,
  }
};

我按照以下方式将此主题应用于我的组件

import React from 'react';
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import …

我使用Material UI对话框来制作表单列表.在官方案件中:

<Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          open={this.state.open}
        >
          This dialog spans the entire width of the screen.
</Dialog>

行动是:

   const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
      />,
    ];

如何构建表单并让Dialog可以提交表单数据？

------------------------------------------------最新情况: ----------------------------------------------

还有另一个答案:

添加的属性type,并form在对话操作按钮:

const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
        type="submit"        //set the buttom type is submit
        form="myform"        //target the form which you want to sent 
      />,
    ];

并将属性id赋予对话框中的表单:

<Dialog
          title="Dialog …

就像html colspan属性一样.某些行的列数与其他行不同.

谢谢

使用InputReact Material UI库(v1.0 beta)中的组件,我试图删除使用伪元素渲染的下划线.

const styleSheet = createStyleSheet('searchInput', () => ({
    underline: {
        '&:before': {
            height:0
        }
    }
}));

const SearchInput = ({ classes, placeholder, value, onChange }) => {
    return (
        <Input
            classes={classes}
            placeholder={placeholder}
            value={value}
            onChange={onChange} />
    );
};

当我尝试定位时&:before,我得到以下错误.覆盖样式并删除此下划线的正确方法是什么？

警告:Material-UI:.searchInput-underline-1572343541:before提供给classes属性对象的键 未在Input中实现.

您只能覆盖下列之一:根,formControl,inkbar,错误输入,残疾人,突出重点,强调,多行inputDisabled,inputSingleline,inputMultiline,FULLWIDTH,标签+ .MuiInput-formControl-583691922,.MuiInput-inkbar-171024778 :之后,.MuiInput-inkbar-171024778.MuiInput为重点-2315792072:之后,.MuiInput错误 - 3674946725:之后,.MuiInput输入-3582851417 :: - WebKit的输入占位符,.MuiInput输入-3582851417 :: -moz-占位符,.MuiInput输入-3582851417:-MS-输入占位符,.MuiInput输入-3582851417 :: - MS-输入占位符,.MuiInput输入-3582851417:专注,.MuiInput输入-3582851417: :-webkit-搜索装饰,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417 :: - webkit的输入占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417 :: - MOZ-占位符,标签+ .MuiInput-formControl-583691922> .MuiInput输入-3582851417:-MS-输入占位符,标签+ .MuiInput-formControl- …

对于移动设计，设计通常具有较小的标题字体。

Material-UI是否具有使版式响应的机制？

我看到默认主题具有在rems中定义的字体大小-这是否意味着仅减小基本字体大小就可以了？（这似乎不起作用，如果您想以不同的比率减少标题字体怎么办）。

我正在尝试从 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 中的最后一次构建时，它将起作用。但是如果我将之前的提交合并到一个新分支并尝试部署它，它不会。

我所经历的MUI文档，在Autocomplete组件部分我有两个props，getOptionLabel而getOptionSelected我得到了定义，但我没有正确理解它。因此，如果有人可以通过示例以简单的方式给我正确的定义，那就太好了