标签: material-ui

这可能是我应该知道的，但是当我传递不带括号的函数时，我不太了解组件的行为。这是我的组件代码。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import AppBar from 'material-ui/AppBar';
import LoginButton from './LoginButton';
import LogoutButton from './LogoutButton';

class Header extends Component {
  renderButton() {
    switch (this.props.auth) {
      case null:
        return
      case false:
        return <LoginButton />
      default:
        return <LogoutButton />
    }
  }



handleTitleClick() {
    return(
      <Link to={this.props.auth ? '/classes' : '/'}>
        QueueMe
      </Link>
    );
  }

  render() {
    const styles = {
      title: {
        cursor: 'pointer',
      }, …

所以基本上，这就是我想要做的。

indicatorClassName对我不起作用，codeandbox中的指标根本没有改变。我查看了组件的实现，并找到了indicatorStyle，但它也没有帮助。

有任何想法吗？

文档链接 我遵循上述文档链接来实现 Select-field 组件。我没有在此组件中找到用于 select all 的正确文档。

组件的导入语句

import SelectField from 'material-ui/SelectField'; 

组件代码：

<SelectField
    className="search_items"
    multiple={true}
    hintText="Select Item"
    value={values}
    onChange={this.handleChange} >
    {this.menuItems(values)}
 </SelectField>

菜单项功能：

menuItems(values) {
     return unique && unique.map((name) => (
        <MenuItem
            key={name}
            insetChildren={true}
            checked={values && values.indexOf(name) > -1}
            value={name}
            primaryText={name && name.concat('(').concat(sectors.filter(i => i === name).length).concat(')')}
        />
    ));
}

OnChange 函数：

handleChange(event, index, values) {
    this.setState({ values })
}

如何为所有要选择的项目启用全选选项。提前致谢

我尝试了很多，但我找不到办法做到这一点。它在 material-ui 中的确切位置在哪里？我看到有些人在使用它。任何帮助表示赞赏。

我最好的猜测是：

import MoreVertIcon from '@material-ui/icons/more-vert';

我正在使用 Material-UI Dialog，我想让它占据屏幕的 80%。理想情况下，我想要这样的东西。

我正在对 Dialog 应用边距，但它没有按预期工作。

const styles = theme => ({
    imageContent: {
        transform: `${translate('-50%','-50%')}`
    }
});

我想为组件内的 div 应用 CSS 属性转换。那么如何从 React Component 中引用 CSS 属性呢？未捕获的 ReferenceError：未定义翻译。

我正在尝试添加列表反应材料 ui组件的辅助文本的第二行。

我该如何修改它？在此处查看现场演示。

<ListItemText primary="Photos" secondary="first row" secondary="second row"/>

import React, { Component } from 'react';
import './App.css';
import Screen from './components/Screen/Screen';
import Button from './components/Button/Button';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import pink from '@material-ui/core/colors/pink';

const buttonTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#2dff46',
    },
    secondary: pink,
  }
});


class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={buttonTheme}>
      <Screen>
        <div>Hello</div>
        <Button variant='contained' color='primary'>
          GO
        </Button>
      </Screen>
      </MuiThemeProvider>
    );
  }
}

export default App;

我只是想创建一个带有一些自定义颜色（主题）的按钮。它可以在没有“theme={buttonTheme}”的情况下工作，但当然它使用默认值。我收到以下错误：

TypeError: Cannot read property 'borderRadius' of undefined
styles
node_modules/@material-ui/core/Button/Button.js:41
  38 …

如果this.state.task.status == 'Completed'我想隐藏按钮（比如添加 display: none 属性）

代码：

<Button size="small"           
style={{display:this.state.task.status == "Completed" ? "none":""}}              
style={textColor} >Mark as Completed</Button>

textColor是另一种工作正常的样式。

• 当我单击chipchipName="button test IPA" 时，会打开一个弹出窗口。
• 我正在尝试从该弹出窗口的 ul 标签中删除填充。
• 但问题是我无法在我的 jsx html 中找到 ul 标签。
• 我在反应代码中给出了 className 但我仍然无法定位
• 你能帮我吗，以便将来我自己解决。
• 提供下面的代码片段

https://codesandbox.io/s/qqqk23x3q

tab-demo.js

<td>
                    <ChipsButton
                      className={classes.chipContainer}
                      chipName="button test IPA"

                      // menuItems={IPAMenuItems}
                      //ChipsButton
                    />
                  </td>

              **chips-dialog.js**

                  <Menu
          className={classes.chipButtonContainer}
          id="simple-menu"
          // anchorEl={anchorEl}
          open={open}
          onClose={this.handleClose}
        >
          <MenuItem className={classes.chipButtonContainerHeader}>
            {this.state.menuText}
          </MenuItem>

          <Button
            className={classes.chipButtonContainerButton}
            key={1}
            style={{
              backgroundColor:
                this.state.menuText === "Active selected" ? "green" : ""
            }}
            // style={{ display: this.state.display ? "none" : "" }}
            // aria-owns={anchorEl ? 'simple-menu' : undefined}
            aria-haspopup="true"
            value={"Active"}
            onClick={this.handleSelect}
          >
            Active
          </Button>
          <Button …