标签: material-ui-next

我尝试使用材质用户界面进行过渡的模态,并且有问题使其居中,并使其响应或居中在小尺寸屏幕(移动).

如果不使用过渡,模态可以居中并且在小尺寸上看起来很好,但如果我添加过渡,则模态不能居中或响应.

这是没有转换链接的代码模式.适用于大屏幕或小屏幕尺寸.

这是具有转换链接的代码模式.

我试图更改top&的值,left但仍然无法集中在大小屏幕尺寸:

function getModalStyle() {
  const top = 25;
  const left = 25;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

谁能帮我？

我正在尝试调整Material-UI表的填充。我要调整“最后一个孩子”的内边距为24px。我试图覆盖主题并使用类{{root：classes.xxx}}，但无法更改。以下是我用于覆盖主题的代码（我也尝试覆盖MuiTableRow和MuiTableColumn）：

const theme = createMuiTheme({

overrides: {
MuiTableCell: {
  root: {
    paddingTop: 4,
    paddingBottom: 4,
        '&  $lastChild': { paddingRight: '5px' },
  },
  paddingDefault: {
    padding: '40px 12px 40px 16px',
  },

  },
},
});

这是我要更改的CSSS（表中每行的最后一个单元格）：

.MuiTableCell-root-511:last-child {
    padding-right: 24px;
}

希望有人能提供帮助。

/H

我对List中的React.cloneElement有疑问。如果列表中有很多元素，那是我们应该避免做的事情吗？React.cloneElement是否进行了可以避免的不必要的重新渲染？

我的组件：

...
      render() {
        const { items, classes, children } = this.props;
        const { expanded } = this.state;
        return (
          <List className={classes.root}>
            <Scrollbars
              style={classes.cssScrollBar}
              renderThumbVertical={this.renderThumb}
            >
              {items.map((item, index) => {
                return (
                  <ListItem key={item.id} className={classes.cssListItemRoot}>
                    {React.Children.map(children, child =>
                      React.cloneElement(child, {
                        id: item.id,
                        name: `Plan nummber ${index}`,
                        handleChange: this.handleChange,
                        isExpanded: expanded === item.id
                      })
                    )}
                  </ListItem>
                );
              })}
            </Scrollbars>
          </List>
        );
      }
...

如何删除选择的“每页行数”？我不想在我的项目中使用它...

我设置了调色板类型：createMuiTheme中为dark，它将背景颜色更改为Dark，这很好。但是文字颜色保持黑色。它不应该适应较浅的颜色吗？

CodeSandbox链接：https ://codesandbox.io/s/j22rvq4w2v

import React from 'react'; 
import ReactDOM from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import App from './App';

const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

ReactDOM.render(

<MuiThemeProvider theme={theme}>
    <React.Fragment>
        <CssBaseline />
            <App/>
    </React.Fragment>
</MuiThemeProvider>,
     document.getElementById('app'));

该应用程序组件仅包含一个AppBar和简单文本。

更新：我之前提到的Material-ui的版本为v1，这是不正确的。抱歉，错误信息是3.10.10