0

我遇到了material-ui 抽屉的问题。我更改了导致问题的抽屉容器的宽度。抽屉在页面内保持一点并且可见，但我不想在我没有点击按钮时让它在页面上可见。现在它可能与 transform 属性有问题。

所以我将其更改为transform: translate(350px, 0px)但随后我遇到了另一个问题，即如果我单击按钮抽屉未显示。这件事有什么帮助吗？？

我得到了解决方案并编辑了代码。

我在这里创建了一个演示 =>看看

还分享了以下代码：

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false
    };
  }

  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer 
                  open={this.state.openDrawer}
                  containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
                  openSecondary={true}
                  docked={true} 
                >
                    <div className="drawer-title-div">
                        <h4 className="drawer-title-text">It's my drawer</h4>
                    </div>
                </Drawer>
      </div>
      </MuiThemeProvider>
    );
  }
}

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

样式.css

h1, p {


font-family: Lato;
}

.show-drawer {
  top: 47px !important;
  text-align: left !important;
  width: 80% !important;
  transform: translate(0%, 0px) !important;
}

.hide-drawer {
  top: 47px !important;
  text-align: left !important;
  width: 80% !important;
  transform: translate(100%, 0px) !important;
}

/* .drawer-side-drawer:focus {
  top: 47px !important;
  text-align: left !important;
  width: 350px !important;
  transform: translate(0px, 0px) !important;
} */

.drawer-title-div {
  display: inline-block;
  width: 100%;
  background: #F2F8FB;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);
}

.drawer-title-text {
  display: inline-block;
  margin-left: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #484848;
  font-family: Muli;
  font-size: 16px;
  font-weight: 600;
}
4

6 回答 6

3

您可以简单地将其添加到 index.css

.MuiDrawer-paper {
width: 60% !important;
}

@media (max-width: 1200px) {
    .MuiDrawer-paper {
 width: 100% !important;
 }
}
于 2021-03-10T07:13:56.877 回答
1

您可以尝试添加一个切换类，您可以摆脱转换。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false
    };
  }

  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer containerClassName={!this.state.openDrawer ? "hide-drawer": "show-drawer"} 
                  open={this.state.openDrawer}
                  openSecondary={true}
                  docked={true} 
                >
                    <div className="drawer-title-div">
                        <h4 className="drawer-title-text">It's my drawer</h4>
                    </div>
                </Drawer>
      </div>
      </MuiThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));
于 2018-04-30T11:03:27.107 回答
1

对于 mui 版本 5，您必须像这样使用 PaperProps 道具：

        <Drawer
          PaperProps={{
            sx: { width: "90%" },
          }}
        >{...Child elements here}</Drawer>
于 2021-11-19T18:40:23.343 回答
0

您可以window.innerWidth用作width: 100%：

    <Drawer ...>
        <div style={{width: window.innerWidth * 0.25}}>
            ...
        </div>
    </Drawer>
于 2022-02-06T16:46:20.663 回答
-1

Drawer-Material-UI如果您查看链接.. 你会发现 Drawer 属性..

width (union: string number) [default : null] Drawer 的宽度（以像素为单位）或字符串格式的百分比，例如。50% 填充一半窗口或 100% 等等。默认使用来自主题的值。

所以只需用宽度更新标签就可以了，

<Drawer width="50%"></Drawer>

在这里检查..

抽屉宽度与导致问题的主题抽屉宽度不匹配..不是变换 CSS 属性。

只是方法不同^^

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Responsive from 'react-responsive-decorator'; // This decorator allows using the library as a decorator.

@Responsive
class App extends Component {
  constructor() {
    super();
    this.state = {
      openDrawer: false,
      width:350
    };

  }
  // Update for kinda media query thing
  componentDidMount() {
    this.props.media({ minWidth: 768 }, () => {
      this.setState({
        width: 350
      });
    });
  this.props.media({ maxWidth: 768 }, () => {
      this.setState({
        width: 150
      });
    });
  }
  toggleDrawer() {
    this.setState({
      openDrawer: !this.state.openDrawer
    });
  }

  render() {
    return (
      <MuiThemeProvider>
      <div>
        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
        <Drawer width={this.state.width} //<- Update
                  open={this.state.openDrawer}
                  containerClassName="drawer-side-drawer"
                  openSecondary={true}
                  docked={true} 
                >
                    <div className="drawer-title-div">
                        <h4 className="drawer-title-text">It's my drawer</h4>
                    </div>
                </Drawer>
      </div>
      </MuiThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));
于 2018-04-30T10:58:42.650 回答
-1

我有同样的问题。

您只需将PaperProps添加到您的抽屉

于 2022-02-10T23:30:04.850 回答