标签: material-ui

我正在使用 react: 15.4.0, material-ui: 0.16.4, react-tap-event-plugin: 2.0.1 并且我的应用程序内置了一些很好的工作流程。当我准备生产时，我发现该应用程序在生产版本中消耗了 917kb，并且应用程序在 ui 转换方面也很缓慢。我不确定这两件事是否相关。

我遵循了几乎所有来自不同博客文章的建议来减小包的大小，但没有任何帮助。

然后我读了一些文章，说 material-ui 很重，会占用应用程序中的大量空间，因此也想检查一下这种可能性。

我在 package.json 中的依赖项如下所示，我同时使用 create-react-app 和独立的 webpack 设置。

"dependencies": {
  "babel-loader": "6.2.9",
  "babel-plugin-transform-class-properties": "6.19.0",
  "babel-polyfill": "6.16.0",
  "babel-preset-es2015": "6.18.0",
  "babel-preset-react": "6.16.0",
  "babel-preset-stage-0": "6.16.0",
  "babel-register": "6.18.0",
  "babel-runtime": "6.20.0",
  "body-parser": "1.15.2",
  "concurrently": "3.1.0",
  "express": "4.14.0",
  "formsy-material-ui": "0.5.3",
  "formsy-react": "0.18.1",
  "https": "1.0.0",
  "isomorphic-fetch": "2.2.1",
  "localforage": "1.4.3",
  "material-ui": "0.16.6",
  "nedb": "1.8.0",
  "pako": "1.0.4",
  "peer": "0.2.8",
  "peerjs": "0.3.14",
  "pushstate-server": "2.1.0",
  "qrcode.react": "0.6.1",
  "react": "^15.4.1",
  "react-addons-css-transition-group": "15.4.1",
  "react-dom": "^15.4.1",
  "react-grid-layout": "0.13.9",
  "react-motion": "0.4.7", …

当我为材质 ui RaisedButton 上的 onClick 事件调用动作创建者时，出现以下错误

失败的道具类型：无效的支柱onClick型的object供给RaisedButton，预计function。

这是我写的组件

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { connect } from 'react-redux';

import * as actions from '../actions';

class App extends Component {
  authButton = () => {
    if(this.props.authenticated) {
      return <RaisedButton label="Sign out" onClick={this.props.authenticate(false)} />
    }

    return <RaisedButton label="Sign out" onClick={this.props.authenticate(true)} />
  }
  render() {
    return (
        <div>{this.authButton()}</div>
    );
  }
}

const mapStateToProps = (state) => {
  return …

我想更改 Material UI StepIcon 中的文本颜色（实际上是一个 SVG 图标），仅用于活动和已完成的步骤。目前，我成功地为这些步骤更改了图标的颜色。这就是我的MuiTheme现在的样子。

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
    }
  },
});

整个步进器看起来像：

Assumings，我想改变的颜色蜱到灰（其表示完成的步骤）和色2号到灰以及（其表示当前激活步骤），同时保持非激活步骤没有变化（白色填充）。

像官方文档一样更改文本的填充属性不会产生任何结果，在开发人员检查器中仍然显示填充等于白色。

我想为整个应用程序应用该样式。

对此有任何提示或解决方案吗？

我正在使用 material-ui ReactJs 中的 Dialog 组件。

<Dialog fullScreen open={this.state.open}
  PaperProps={{ classes: {root: classes.dialogPaper} }}
  onClose={this.handleClose.bind(this)} transition={this.props.transition}>
  {this.props.children}
</Dialog>

在上面的代码中，我已经覆盖了 PaperProps 的根类。现在我还想覆盖 PaperProps 中的样式。在 PaperProps 中是否可以覆盖样式。

就像是 PaperProps={{ classes: {root: classes.dialogPaper}, style:{} }}

如果我错了，请告诉我。我也想覆盖样式。

现在还需要https://github.com/zilverline/react-tap-event-plugin吗？或者它已经直接实现到 React 的源代码中，并且点击延迟消失了。

我正在使用 Material UI。在文档中它表明我可以使用：

 import Icon from "@material-ui/core/Icon";
   ...
  <Button variant="contained" color="primary" className={classes.button}>
     blabla
      <Icon className={classes.rightIcon}>send</Icon>
  </Button>

但它显示的是一个带有“BLABLA SE”文本的按钮，这是错误的。

但是当我使用：

import SendIcon from "@material-ui/icons/Send";
....
    <Button variant="contained" color="primary" className={classes.button}>
     Blabla
     <SendIcon className={classes.rightIcon} />
    </Button>

它工作得很好，BLABLA左侧有一个文本和一个发送图标。

在文档中提供的沙箱中，两者都可以工作。那么为什么第一种情况对我不起作用？

我正在创建一个类似于Mini Variant drawer demo的侧边栏，但我的项目指定所有 css 格式必须在单独的 css 文件中完成，而不是在抽屉的 js 文件中（如 material-ui 演示所做的那样）。我已经想出了如何根据演示格式化我的抽屉，但现在我需要弄清楚如何分离 css 并使其可用。

现在抽屉使用默认设置呈现，但除了一个 css 类之外的所有类都无法工作/呈现。只有一个 listItem 可以工作并更改 ListItem 的高度，这很奇怪。所有其他 css 类都不会改变抽屉的外观。

这是非工作版本，其中导入了一个单独的 css 文件：

.root {
    display: flex;
}

.drawerOpen {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    white-space: nowrap; /*text doesn't shrink into side*/
    width: 240;
    transition: width 2s;
}

.drawerClose {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    width: 240;
    overflow-x: hidden; /*hides text when drawer is closed*/
    transition: width 2s;
}

.iconButton {
    margin-top: 15px; …

我有这个render功能：

render() {
    const {classes} = this.props
    return (
      <Paper className={classes.root} elevation={4}>
        <Typography type="title" className={classes.title}>
          All Users
        </Typography>
        <List dense>
         {this.state.users.map((item, i) => {
          const photoUrl = item._id
              ? `/api/users/photo/${item._id}?${new Date().getTime()}`
              : '/api/users/defaultphoto'
          return <Link to={"/user/" + item._id} key={i}>
                    <ListItem button>
                      <ListItemAvatar>
                        <Avatar src={photoUrl} className={classes.bigAvatar}/>
                      </ListItemAvatar>
                      <ListItemText primary={item.name}/>
                      <ListItemSecondaryAction>
                      <IconButton>
                          <ArrowForward/>
                      </IconButton>
                      </ListItemSecondaryAction>
                    </ListItem>
                 </Link>
               })
             }
        </List>
      </Paper>
    )
  }
}

当我最初加载页面时，每个用户的左侧都会出现下面的蓝点：

如果我然后单击指向另一个页面的链接，然后单击浏览器后退箭头返回到用户页面，则用户列表将显示为没有蓝点：

如果蓝点永远不会出现，我会更喜欢。我该怎么做呢？

在反应材料 Ui 的项目中使用。主题被覆盖，但按钮和输入的颜色不会改变。

这theme.js是创建 Material Ui 主题的地方

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

import type
{
  Theme,
} from '@material-ui/core';

const theme: Theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ffa300',
      light: '#ffd449',
      dark: '#c67400',
      contrastText: '#000000',
    },
    secondary: {
      main: '#ff8500',
      light: '#ffb644',
      dark: '#c55600',
      contrastText: '#000000',
    },
    error: {
      main: '#A21C2B',
    },
  },
});


export default theme;

这是 App.js

import React from 'react';
import { ThemeProvider } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import …

我可以通过什么方式覆盖全局主题，以便所有使用变体 = 'outlined' 的组件都受该样式的影响。还想覆盖焦点、悬停等事件。

 "@material-ui/core": "^3.9.2",