小编Set*_*can的帖子

我的假设是Dialog的状态导致问题,但我无法弄清楚这一点.工具提示按预期工作,直到单击IconButton.对话框会弹出,但退出对话框时,工具提示会弹出为活动状态.

class DeleteDocument extends React.Component {
  state = {
    open: false,
  };

  onDeleteFile() {
    try {
      ensureJobIsUnlocked();
    } catch (err) {
      return;
    }

    const confirmedByUser = true;
    if (confirmedByUser) {
      this.props.onDeleteFile(this.props.selectedDocument.id);
      this.setState({ open: false });
    }
  }

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Tooltip id="tooltip-icon" title="Delete Document">
          <div>
            <IconButton
              disabled={(this.props.selectedDocument == null)}
              onClick={this.handleClickOpen}
            >
              <DeleteIcon />
            </IconButton>
          </div>
        </Tooltip>
        <Dialog
          open={this.state.open} …

我正在使用带有画布的app bar抽屉下的剪辑作为主要内容.我在抽屉中有三张可折叠的卡片,当默认情况下都设置为打开时,它会在主体上显示一个垂直滚动条,在html元素下方显示一个带有body元素的空白区域.如果你关闭所有三张卡片,滚动就会消失.如果重新打开卡片,则不会显示滚动条.只有在打开所有三张卡的页面加载时才会出现此问题.

我们的短期解决方案是只打开两张卡片加载页面,但我想要注意即使有两个打开,抽屉内容也会延伸到窗口下方而没有滚动.抽屉的CSS也不应该是问题.其他人遇到过这个问题吗？

  drawerPaper: {
    position: 'relative',
    width: 400,
    overflowX: 'hidden',
    overflowY: 'hidden',
    '&:hover': {
      overflowY: 'auto',
    },
    '&::-webkit-scrollbar': {
      display: 'none',
    },
  },



   <MuiThemeProvider theme={this.state.useDarkTheme ? darkTheme : lightTheme}>
    <div className={classes.root}>
      <AppBar position="absolute" className={classes.appBar}>
        <Toolbar>
          <div className={classes.flex}>
            <Typography className={classes.headerTextColor} variant="title">
              Title
            </Typography>
            {sealedBy}
          </div>
          <HeaderTools />
          <Tooltip id="toggle-icon" title="Toggle light/dark theme">
            <IconButton className={classes.headerTextColor} onClick={this.toggleTheme}>
              <BrightnessMediumIcon />
            </IconButton>
          </Tooltip>
        </Toolbar>
        {spinner}
      </AppBar>
      <Drawer
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.fixedWidth}>
          <div className={classes.toolbar} />
          <DocumentTools />
          <SealingTools />
          <AnnotationTools /> …

这是问题所在:

我们可以根据内容调整窗口大小,但是当调整窗口大小时,高度不会动态变化,要么在下面留下大量的空白区域,要么将内容隐藏在页面的其余部分后面.

这是代码:

HTML:

<div class="panel-container" style="height: 706px;">
   <div class="control-panel create-job flexible">
     <div class="column-container">

JSX:

  resizePanel: function (height) {
   this.refs.panel.style.height = height + 'px';
  },
  getPanelContainerStyle: function (controlPanel) {
    if (this.state.isPanelOpen && _.isObject(controlPanel)) {
      var height = controlPanel.type.prototype.height;
      if (_.isNumber(height)) {
       return {height: height};
      } else return {height: 100};
    } else return {};
  },

CSS:

 .panel-container
   height 0
   transition height 0.3s
   margin-top bump-lg px
   margin-bottom bump-lg px

任何帮助深表感谢!

我有一个带有两个可扩展工具栏的应用程序.左侧工具栏按预期运行,但我无法使正确的工具栏正确推送内容.请参阅下面的代码.

我从这里复制了确切的代码 - 请参阅持久抽屉:https://material-ui.com/demos/drawers/

KeyboardListener是display:none,SceneCanvas元素具有以下样式:

root: {
    height: '100%',
    width: '100%',
    position: 'relative',
    zIndex: 0,
    lineHeight: 0,
    cursor: 'crosshair',
}

左侧和右侧工具栏的所需功能是推送内容并调整画布和画布内容的大小.非常感谢提示或见解!

import React from 'react';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon …

我有一个相当复杂的应用程序与多个抽屉.我的右侧抽屉动画有问题.抽屉本身的动画效果很好,但父母不会.我尝试将抽屉的相同动画应用于父div,这并没有解决我的问题.我在CodeSandbox中复制了这个问题.见下文.

例

我很难将颜色应用到我的复选框的不确定状态.完全选中后,复选框会正确显示为辅助颜色.有什么建议我做错了什么来定位不确定状态并改变它的颜色？

const styles = {
 root: {
  '&$indeterminate': {
    color: 'red',
   },
 },
 indeterminate: {},
};

...

<ListItem
  dense
  button
  key={this.props.key}
  className={this.props.className}

  disabled={this.props.disabled}
  onClick={this.props.onClick}
>
  <Checkbox
    indeterminate={this.props.indeterminate}
    classes={{
       root: classes.root,
       indeterminate: classes.indeterminate,
     }}
    disableRipple
    tabIndex={-1}

    disabled={this.props.disabled}

    checked={this.props.checked}
   />
   <ListItemText inset primary={this.props.text} />

  { hasChildren ? <ExpansionIcon onClick={this.onExpansionItemClick} /> : null }
</ListItem>

我这样做是基于这里的文档:https://material-ui.com/customization/overrides/#overriding-with-classes

谢谢你的帮助!

我正在使用React,React Markdown和Material-UI创建一个包含一些帮助文档的相当简单的网页.我收到以下控制台错误:

"警告:React无法识别columnAlignmentDOM元素上的prop.如果您故意希望它作为自定义属性出现在DOM中,请将其拼写为小写columnalignment.如果您不小心将其从父组件传递,请将其从DOM中删除元件."

建造和检查时:

<table class="Component-table-207" columnalignment=","><thead><tr><th>Shortcut</th><th>Action</th></tr></thead><tbody><tr><td>Zoom in/out</td><td>Scroll up/down with mouse</td></tr><tr><td>Down/Up Arrow</td><td>Next/Previous Document</td></tr><tr><td>Right/Left Arrow</td><td>Next/Previous Page of current Document</td></tr><tr><td>Page Up/Page Down</td><td>Jump to first/last document in the PDF queue</td></tr><tr><td>Next/Previous Page of current Document</td><td>Page Up/Page Down</td></tr><tr><td>Click drag</td><td>Pan current document</td></tr><tr><td>Ctrl+R</td><td>Refresh the editor</td></tr><tr><td>Ctrl+Z</td><td>Undo</td></tr><tr><td>Ctrl+Y</td><td>Redo</td></tr></tbody></table>

这是我在Markdown.tsx文件中的代码

const renderers = {
  /* eslint-disable-next-line react/prop-types */
  heading: ({ level, ...props }: any) => {
    let variant;
    let paragraph;

    switch (level) {
      case 1:
        variant = 'display1';
        break;
      case 2:
        variant = 'title';
        break;
      case 3: …

我有一个带有标签的临时抽屉。打开“抽屉”并切换颜色主题时，将删除选项卡中组件的自定义样式，从而破坏了样式。如果关闭抽屉或在选项卡之间切换，则可以解决此问题。这仅发生在两个选项卡中，而不是全部。请参见下面的图片。

为简单起见，我将显示“检查结果”选项卡的代码。“齿轮”图标的样式已删除，默认情况下为左侧。

...
const styles: StyleRulesCallback = () => ({
  buttonDiv: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'flex-end',
  },
});

...
type Props = StateProps & DispatchProps & WithStyles<typeof styles>;

class CheckResultsPanel extends React.Component<Props> {
...
render() {
    this.selectedKeys = [];
    const tree = this.renderTree();
    const { classes } = this.props;

    return (
      <div id="checkResultsPanel">
        <div className={classes.buttonDiv}>
          <IconButton onClick={this.designSettingsClick} aria-label="Design Settings">
            <SettingsIcon />
          </IconButton>
        </div>
        <Divider />
        {tree}
      </div>
    );
  }

正在将有问题的组件导入到抽屉中，如下所示：

      <div className="right-sidebar-container">
        <div id="loadCaseObjectTabs" className={classes.root}>
          <AppBar position="static">
            <Tabs …