嗨,我正在使用React 14并在ES6中编写它.我正在使用formsy-material-ui进行表单验证.有一种情况我想在单击按钮时清除文本字段的值.

我尝试了以下代码

<FormsyText
    name="email"
    ref="email"
    validations="isEmail"
    validationError="Invalid Email"
    hintText="Email"
    value={this.state.emailValue}
/>

点击按钮,我正在执行以下代码行

this.setState({emailValue : ''});

但是文本字段没有被清除.如何清除它.请帮忙.

我正在使用Material-Ui Appbar但是当我向下滚动页面时,appbar会在iOS 10的地址栏下方.而地址栏也会保持打开而不是折叠.我使用的是默认材质UI主题.

我不认为它应该以这种方式工作.有没有一个如何正确执行此操作的示例？

理想情况下,如果AppBar固定在页面顶部会很棒.

谢谢.

我正在使用material-ui Date-Picker。如何禁用今天日期之前的过去几天？

 import React from 'react';
 import DatePicker from 'material-ui/DatePicker';

function disablePastDays(date) {
  //code here to disable past days
}

const calendar = () => (
    <div>
        <DatePicker shouldDisableDate={disablePastDays}/>
    </div>
)

我从这里开始使用示例性应用程序，使用Material ui的简单react组件开始：https : //www.npmjs.com/package/material-ui 我有以下问题

1. 我们是否需要为每个重要的用户界面组件使用MuiThemeProvider？
2. 有没有办法在全球范围内使用它

对于给定的代码，这工作正常。但是当我在MuiThemeProvider标签中添加任何其他组件时，它不会呈现任何内容，并且webpack不会引发任何错误。

让我们看下面的例子。我只是复制了MyAwesomeReactComponent两次，但它停止了工作。如果我删除MyAwesomeReactComponent的第二个实例，则此方法工作正常。

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

这是MyAwesomeReactComponent.js的代码

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
  <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

我在Material UI主题中直接更改按钮文本颜色时遇到问题.更改原色+按钮字体大小工作正常,所以问题不在于传递主题.这是我的代码:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';

const theme = createMuiTheme({
  palette: {
    primary: lightBlue, // works
  },
  raisedButton: {
    color: '#ffffff', // doesn't work
  },
  typography: {
    button: {
      fontSize: 20, // works
      color: '#ffffff' // doesn't work
    }
  }
});

const App = ({ user, pathname, onToggleDrawer }) => (
  <MuiThemeProvider theme={theme}>
    ...
  </MuiThemeProvider>
);

我也尝试使用导入的颜色而不是#ffffff,但这也没有效果.

有人有任何想法吗？

我正在使用材质UI进行反应，我在阵列中有40张动态卡，当我渲染它们时，我希望连续3张卡，并且将所有卡放在一列中。我正在使用此卡：https : //codesandbox.io/s/r084q99q34

背景

我在应用程序中使用Material ui绘图以及样式化组件。我已阅读了有关使用样式化组件对Material ui组件进行样式设置的文档，并使其可用于多个简单的组件。

问题

更改背景颜色不符合我的预期。只是在样式化的组件中添加样式似乎将样式应用于错误的级别。

我尝试过的

import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components';

const StyledDrawer = styled(Drawer)`
        background-color: red;
`;

结局

从我看到的内容中，我需要对称为Paper组件的内部部分进行样式设置。我看不到使用样式化组件来做到这一点的方法。

题

是否可以在带有样式化组件的材料ui抽屉中对此隐藏的纸张组件进行样式设置？

我想为React的材料ui中的所有选项卡覆盖选定的文本颜色。我知道我可以使用以下代码覆盖某些部分：

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        color: '#000000',
        backgroundColor: '#ffffff',
        '&:hover': {
          backgroundColor: 'rgba(108, 130, 168, 0.11764705882352941)',
          color: '#000000',
        }
      }
    }
  }
});

其次是

 <MuiThemeProvider theme={theme}>
    <HomePage/>
 </MuiThemeProvider>

但是，选择选项卡后，它会应用一个类，例如“ .MuiTab-textColorPrimary-144.MuiTab-selected-146”。选择Tab组件时，如何为textColorPrimary指定全局替代颜色？我对全局替代而不是对单个实例替代特别感兴趣。缺少Tab组件的特定方式，如何为“选定的” primaryTextColor指定全局替代？

具有简单的react组件：

<Table>
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
</Table>

如何有条件地将TableBody封装在另一个组件（例如Paper）中？我想到了类似下面的内容，但这似乎没有做到。

<Table>
  {paper && <Paper>}
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
    {paper && </Paper>}
</Table>

以下内容有什么问题：

<List>
  {sections.map(section => (
    <>
      {section.header && <ListSubheader key={section.header}>{section.header}</ListSubheader>}
      {section.items
        .filter(item => new RegExp(itemsFilter, 'i').test(item.value))
        .map(item => {
          const labelId = `multi-select-filter-list-checkbox-label-${item.key}`;
          return (
            <ListItem key={item.key} role={undefined} dense button onClick={handleToggle(item)}>
              <ListItemIcon>
                <Checkbox
                  className={checkboxClasses.root}
                  edge="start"
                  checked={checked.indexOf(item) !== -1}
                  tabIndex={-1}
                  disableRipple
                  color="primary"
                  inputProps={{ 'aria-labelledby': labelId }}
                />
              </ListItemIcon>
              <ListItemText
                id={labelId}
                primary={item.value}
                primaryTypographyProps={{
                  variant: 'body1'
                }}
              />
            </ListItem>
          );
        })
      }
    </>
  ))}
</List>

我相信我会提供钥匙；错误在哪里？