标签: material-ui

这应该是一件非常简单的事情，但我对material-ui还很陌生。我正在使用material-ui v1，并且我正在尝试更改主题的主要颜色。这是我的主题对象在不使用自定义颜色的情况下的样子：

import { createMuiTheme } from 'material-ui-next/styles';
import blue from 'material-ui-next/colors/purple';
import green from 'material-ui-next/colors/green';
import red from 'material-ui-next/colors/red';


const theme = createMuiTheme({
    palette: {
        primary: green, 
        secondary: {
          ...green,
         },
       error: red,
     },
});


export default theme;

在原色中，我想使用我的自定义颜色“#6699CC”。如果我分配主要：'#6699CC'，它会给出以下错误：

“Material-UI：主色缺少以下色调：50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor 请参阅从material-ui/colors导出的默认颜色，靛蓝或粉红色。警告@bundle.js:37805 ”

这用于 0.19 beta 版本，但不适用于 V1-beta。谁能帮我解决这个问题吗？

我创建了自己的主题 import { createMuiTheme } from 'material-ui/styles';

export const MyTheme = createMuiTheme({
    palette: {
        primary: {
            light: '#757ce8',
            main: '#3f50b5',
            dark: '#002884',
            contrastText: '#fff',
        },
        secondary: {
            light: '#ff7961',
            main: '#f44336',
            dark: '#ba000d',
            contrastText: '#000',
        },
        error: {
            light: '#FF5F57',
            main: '#CE160C',
            dark: '#380300',
            //contrastText: will be calculated to contast with palette.primary.main
        }
    }
});

在我的应用程序中使用它

<MuiThemeProvider theme={MyTheme}>
    <AppContainer>
        <BrowserRouter children={ routes } basename={ baseUrl } />
    </AppContainer>
</MuiThemeProvider>

但是如何更改MenuItem主题中的悬停样式Menu并Select使用主题呢？

我是 Material-ui 和 React 的新手，我需要在循环中动态创建多个菜单。请找到代码片段：

state = {
    anchorEl: null,
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

    render() {
        const { anchorEl } = this.state;
        let items = _.map(results, (item, index) => {
        return (
              <ListItem
               key={item.ID}
               divider
              > 
              <ListItemSecondaryAction>
               <IconButton
                   aria-label="More"
                   aria-owns={anchorEl ? 'long-menu' : null}
                   aria-haspopup="true"
                   onClick={this.handleClick}
                  >
                  <MoreVertIcon />
                  </IconButton>
                  <Menu
                   id="long-menu"
                   anchorEl={anchorEl}
                   open={Boolean(anchorEl)}
                   onClose={this.handleClose}
                   PaperProps={{
                     style: {
                        maxHeight: 200,
                        width: 200,
                      }, …

这是我的数组

const cct =cca.table.field.split(',');
console.log(cct);

  <SelectInput value={this.state.value}
            onChange={this.handleDropDownChange}            
            maxHeight={200}
            
            floatingLabelFixed={true}
            >
            {myarray}
        </SelectInput>

我尝试这样做

    const cct = cca.table.field.split(',');
    const items= [];
    cct.forEach(element => {
      cct.push(<MenuItem key={element.Key} value={element.Key} primaryText={element.Value} />);
    });
    console.log(cct);

但它不起作用

我有一个这种形式的文本输入：

  <FormControl className='searchOrder'>
    <input
      className='form-control'
      type='text'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
    />
  </FormControl>

它在功能上运行良好，但我想在输入的左侧添加一个搜索图标，如下所示：

我不知道在哪里添加该代码片段，我尝试了内部输入，但它会引发错误，所以我把它放在后面，但屏幕上没有出现任何图标。

  <FormControl className='searchOrder'>
    <input
      className='form-control'
      type='text'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
    />
    <span>
      <i class='fas fa-search'></i>
    </span>
  </FormControl>

任何想法如何解决这个问题？

如果相关，searchOrder css 类：

.searchOrder {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 20%;
  max-width: 250px;
  height: 20%;
  left: 0px;
  top: 0px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  border-radius: 4px;
}

更新：

我也尝试过 InputAdornment 但仍然没有出现图标。

  <FormControl className='searchOrder'>
    <InputLabel htmlFor='input-with-icon-adornment'></InputLabel>
    <input
      className='form-control'
      type='text' …

出现 MUI 对话框时，有什么方法可以模糊背景内容？（默认操作是使背景变暗，但我需要对其进行模糊处理）。这是我要找的：

我通常使用 makeStyles 来编写样式，但现在我不得不使用 MUI 表，并且在其文档中样式是由 withStyles 完成的。有人能说出它们有什么不同吗？

我需要一些帮助来解决以下问题。我正在使用 Material ui 图标，并且该项目的设置方式是，当我想使用图标时，我必须这样做：

import {Muicon } from '@/lib/material';

 ...

<Muicon.Visibility />

随着眼睛图标出现。

现在我想要做的是：有一个屏幕，用户可以在其中选择要在其他屏幕中显示的图标，例如，用户写“可见性”（只是一个字符串），然后使用 <Muicon.Visibility /> 组件必须显示在另一个屏幕中。

问题是我不能做类似的事情

<Muicon.{userIcon} />

有人能告诉我怎么做吗？我必须使用用户输入的字符串创建一个组件，有没有办法做到这一点？或者我需要不同的方法？

谢谢

我试图在单击 Button 时打开 Material UI Box 组件，并在再次单击 Button 时关闭 Box。我试图从谷歌搜索解决方案，但真的找不到任何简单的东西。我需要非常基本的解决方案。我没有任何我尝试过的解决方案，因为我只是想知道如何做到这一点。

我假设我需要这些处理程序和其中的一些代码：

const [show, setShow] = useState(null);

const handleOpen = event => {
    setOpen(event.currentTarget);
};

const handleClose = () => {
    setOpen(null);
};

这是应该打开和关闭 Box 组件的 Button 组件。在那里我需要两个功能。当我单击按钮时，它设置 Box !null 如果它是 null 和 null 如果它是 !null：

<Button 
    className={classes.button}
    onClick={handleOpen}
>
    Click
</Button>
<Box className={classes.box}>
    // Some content
</Box>

所以我只使用了几天的 clojurescript 和试剂，我正在尝试创建一个简单的个人网站。我使用 shadow-clj 设置项目以进行热重载。

首先，我导入了所需的 material-ui 东西：

(:require [reagent-material-ui.icons.home :refer [home]]
          [reagent-material-ui.icons.apps :refer [apps]]
          [reagent-material-ui.core.list :refer [list]]
          [reagent-material-ui.core.list-item :refer [list-item]]
          [reagent-material-ui.core.list-item-icon :refer [list-item-icon]]
          [reagent-material-ui.core-list-item-text :refer [list-item-text]])

然后我在导航栏中定义了我想要的项目：

(def menu-items '({:list-icon [home] :list-text "Home"}
                  {:list-icon [apps] :list-text "Portfolio"}))
                   

然后我尝试遍历menu-items并将它们放入试剂组件中：

(defn navbar []
  [list
    (map (fn [item]
           [list-item
             [list-item-icon (:list-icon item)]
             [list-item-text (:list-text item)]])
         menu-items)])

现在，当我重新加载代码时，只显示文本:list-text但没有图标。我已经尝试在没有任何循环的情况下显示图标，并且效果很好。

控制台没有错误输出只有两个警告：

Warning: Every element in a seq should have a unique :key: ([#object[reagent.impl.template.NativeWrapper] [#object[reagent.impl.template.NativeWrapper] [home]] [#object[reagent.impl.template.NativeWrapper] "Home"]] [#object[reagent.impl.template.NativeWrapper] [#object[reagent.impl.template.NativeWrapper] [apps]] [#object[reagent.impl.template.NativeWrapper] …