标签: material-ui

我无法使用 Material-UI 的 Popover 组件获得这种行为。

我这里有这个代码示例：https : //codesandbox.io/s/88z3nq96jl 查看问题的步骤：

1. 当我单击 Filter1 按钮时，弹出窗口出现。
2. 然后，当我单击 Filter2 按钮时，Filter1 的弹出窗口关闭。
3. 然后，我需要再次单击以显示 Filter2 的弹出窗口。

但是我不想在其中一个弹出窗口打开时单击两次，我需要它关闭前一个并同时打开正确的一个。

我认为背景会阻止点击事件的传播，所以它背后的过滤器永远不会被点击。有什么办法可以避免这种情况吗？

我正在为我的反应项目 (material-ui.com) 使用材料 ui 库，并希望在 appbar 组件的中心添加我的徽标。

我尝试使用以下代码：

 <AppBar position="sticky" >
           <Toolbar>
                  <img src={'../logo.svg'} className={classes.logo} alt="logo" />
            </Toolbar>
 </AppBar>

样式是：

logo: {
        margin: 'auto',
        textAlign: 'center',
        maxWidth: '50%',
        maxHeight: '70%',
    }

它“有点”有效。我的意思是在 Chrome 和 Firefox 中徽标大小不同，而在 IE 中它与应用栏重叠。

我正在寻找如何将此徽标居中放置在所有浏览器之间相对一致的栏中间。

我尝试为 mui-app-bar 使用伪类。我在这里阅读了一些关于它的问题。但它并没有让我更进一步。我的组件如下所示：

const styles = (theme: Theme) => createStyles({
    appBar: {
        backgroundColor: theme.palette.background.default,
        height: '48px',
        '&::before': {
            content: "",
            position: 'absolute',
            left: '2.5%',
            bottom: 0,
            right: '2.5%',
            width: '95%',
            borderBottom: '1px solid magenta',
        }
    }
});

class TabBar extends React.Component<WithStyles<typeof styles> & WithTranslation, TabBarInterface> {
...
render() {
        const { classes } = this.props;
        ...

        return (
                <AppBar className={classes.appBar} position="relative">
                  ...
                </AppBar>

        );
    }
}

export default withStyles(styles)(withTranslation()(TabBar));

编辑

用一个冒号应用伪类对我来说也不起作用。

我是使用材料的新手，我想删除选择“每页行数”并显示“n”行，例如 10。

<TablePagination
          rowsPerPageOptions={[]}
          component="div"
          count={rows.length}
          rowsPerPage={10}
          page={page}
          backIconButtonProps={{
            "aria-label": "Previous Page"
          }}
          nextIconButtonProps={{
            "aria-label": "Next Page"
          }}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />

但是，该表继续显示 5 行。我怎样才能改变这种行为？提前致谢

如何修改悬停在快速拨号组件上时显示的工具提示的字体大小？

链接到 SpeedDial 组件 https://material-ui.com/components/speed-dial/

链接到 Speeddialaction 组件 https://material-ui.com/api/speed-dial-action/

我正在尝试遵循material-ui 自定义样式和链接，但不确定如何覆盖classes和使用withStyles

      <Breadcrumbs aria-label="breadcrumb" separator=" " className="menu">
        <Link color="inherit" href="/home">
          Home
        </Link>
      </Breadcrumbs>

我修改了全局app.css文件

a:hover{
  border-bottom: 1px solid red
}

结果就像

Home
----
----  <- I have 2 underlines now when hovering over the link. The bottom one will be red.

我如何覆盖它，例如以下？

Home
---- <- only 1 red underline shown when hovering over the link

请帮忙，这让我发疯了，感觉这应该很简单。

我似乎无法center在Card我尝试创建的组件中间看到图像/头像。

试了alignText，alignItems，alignContent，justify。

我什至尝试过哪个有效，但显然现在已经过时了......

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar';
import Dankirk from '../assets/img/dankirk.jpg'

const useStyles = makeStyles({
  card: {
    width: "100%",
    minHeight: "150px",
    borderRadius: "0px",
  },
  title: {
    fontSize: 14,
    textAlign: "center"
  },
  pos: {
    marginBottom: 12,
  },
  avatar: {
    margin: 10,
    width: 120,
    height: 120,
  }, …

当我设置 className 来更改 Snackbar 的背景时，它不会覆盖它。相反，当页面呈现时，它会暂时显示我想要的背景颜色，然后立即被覆盖。

我查看了其他一些 Stackoverflow 答案，但仍然无法正常工作。

// imports....
import Snackbar from '@material-ui/core/Snackbar';
import createClientsStyle from "../../../PageComponents/Landing/CreateClients/style";

function CreateClients(props) {

    //....code

      const { classes } = props;

      return (

              //............code

              <div>

                  <Snackbar

                      className={classes.snackbarStyle}    //<--- here

                      anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                      }}

                      open={true}
                      autoHideDuration={6000}

                      ContentProps={{
                        'aria-describedby': 'message-id',

                      }}

                      message={<span id="message-id"><div>Hi there! Some message.</div></span>}

                  />
            </div>

    );
}

CreateClients.propTypes = {
  classes: PropTypes.object.isRequired
}

const styles = (theme)=>(createClientsStyle(theme));

export default withStyles(styles)(CreateClients)

样式表

const createClientsStyle = function(theme){
    return  {
     root: {
        flexGrow: …

我试图将材料 ui 从 迁移v3到v4，但遇到了这个问题

我认为这个问题与 prop IconComponentfor Selectcomponent 有关，但是在将它添加到@material-ui/core/Select我项目中的每个组件后它没有帮助。

此外，我在材料 ui github 存储库https://github.com/mui-org/material-ui/pull/17390/files 中发现了此更改，也许它会有所帮助

您还可以在下面找到我的所有依赖项：

 "dependencies": {
    "@babel/runtime": "^7.6.2",
    "@date-io/date-fns": "0.0.2",
    "@material-ui/core": "4.4.3",
    "@material-ui/icons": "3.0.1",
    "@material-ui/pickers": "3.2.6",
    "@material-ui/styles": "^4.4.3",
    "axios": "0.19.0",
    "classnames": "2.2.6",
    "compression-webpack-plugin": "3.0.0",
    "connected-react-router": "6.4.0",
    "date-fns": "2.0.0-alpha.27",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "history": "4.6.3",
    "humps": "2.0.0",
    "jss": "^10.0.0",
    "jss-camel-case": "6.1.0",
    "jss-default-unit": "8.0.2",
    "jss-expand": "5.3.0",
    "jss-extend": "6.2.0",
    "jss-global": "3.0.0",
    "jss-nested": "6.0.1",
    "jss-props-sort": "6.0.0",
    "jss-vendor-prefixer": "8.0.1",
    "lodash": "4.17.14",
    "moment": "2.23.0",
    "normalizr": …

Slide in Material UI 过渡从屏幕边缘开始，有什么办法可以限制卡片组件内部的交易。我已经发布了下面的代码来强调这个问题。我的目标是确保过渡在组件边界内开始和结束

例如在下面的代码中，我希望在卡片材质 UI 组件中开始和结束过渡

import React from 'react';
import Card from '@material-ui/core/Card';
import { IconButton, CardContent, Slide, Paper } from "@material-ui/core";
import { Settings } from "@material-ui/icons"
import { withStyles } from '@material-ui/core/styles'


const styles = {
    card: {
        minWidth: 560,
    },
    cardContent: {
        padding: 8,enter code here
        display: 'flex',
        justifyContent: 'flex-end'
    },
    smallIcon: {
        width: 36,
        height: 36,
        padding: 0,
    },
    paper: {
        width: "400px",
        height: "320px",
        zIndex: 1,
        position: "absolute",
        backgroundColor: "#000000",
        top: "20%", …