标签: material-ui

我想创建一个ExpansionPanel其中摘要可能是一长串完整字符（即没有连字符，没有空格）的地方。

当我尝试它时， ExpansionPanelSummary组件在窄宽度显示器上显示效果不佳 - 它会覆盖按钮并溢出屏幕外。

这是我的示例，从ExpansionPanel Material-UI 演示中分叉出来，缩小输出帧的宽度，您可以看到电子邮件地址没有换行并且看起来很丑：https : //codesandbox.io/s/wqm5k3vmyw

我已经尝试使用nowrap上Typography得到它夹（我的首选解决方案）：

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
  <Typography nowrap className={classes.heading}>
    areallyreallylongaddress@email.example.com
  </Typography>
</ExpansionPanelSummary>

我也试过添加样式 overflowWrap: "break-word"来强制它在任何地方换行，而不仅仅是在连字符或空格上。

我能做的最好的事情是通过添加style={{ textOverflow: "ellipsis", overflow: "hidden" }}到ExpansionPanel（参见链接示例中的第二个示例）。

理想情况下，我希望它通过从上下文右侧截断、显示省略号而不是覆盖展开图标来发挥作用。
我怎样才能做到这一点ExpansionPanel？

否则，我怎么能强制它自动换行？

我使用的是 material-UI v3.4.0，问题在 Chrome 和 Firefox 上可见。

我想将 Material UICircularProgress组件显示为几乎填满未知大小的父 div 所需的大小。比方说，尺寸应该是0.8 * min(parent_height, parent_width)。我尝试过愚弄max-width什么的，但没有成功。

我可以使用一些useDimension钩子来测量父母的尺寸，但我认为这是最后的手段。一定有一个纯 CSS 解决方案，对吗？

我正在尝试使用 material-ui/lab 日期选择器，但是出现此错误！我已经使用更新了我的 material-ui 版本npm install @material-ui/core@latest并且它运行良好。但是，我失去了使用createMuiTheme&的能力MuiThemeProvider。

我正在尝试为 Material UI 中的组件创建自定义变体Button。

我的第一步是Button使用我想要的样式创建一个基于组件的组件：

// CTA.js

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: { // CUSTOM__STYLES },
  label: { // CUSTOM__STYLES },
});

const CTA = ({ children }) => {
  const classes = useStyles();

  return (
    <Button
      classes={{
        root: classes.root, 
        label: classes.label,
      }}
    >
      {children}
    </Button>
  );
};

然后，我将该组件导入到Button我正在创建的新组件中，如下所示：

// Button.js
import MuiButton from "@material-ui/core/Button";
import CTA from "./CTA";

const Button = ({ variant, …

我正在使用TextField组件来捕获电话号码.当用户输入时,如果条目不是数字或者不遵循格式并且显示错误文本,我想使条目无效.目前,即使不触及该字段,也会显示errorText.我怎样才能实现这种行为？

任何帮助是极大的赞赏.

我试图添加一个快餐栏，以便在用户登录或不登录时显示一条消息。SnackBar.jsx：

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import CloseIcon from "@material-ui/icons/Close";
import green from "@material-ui/core/colors/green";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";

const variantIcon = {
  success: CheckCircleIcon,
  error: ErrorIcon
};

const styles1 = theme => ({
  success: {
    backgroundColor: green[600]
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  icon: {
    fontSize: 20
  },
  iconVariant: {
    opacity: …

我目前正在使用全局主题覆盖自定义一些组件，希望尽可能保持 Material-UI 主题引擎的完整性。我知道我可以使用组合来完成我想要做的事情，但我想看看是否可以通过覆盖来实现这一点。

目标

将 BottomNavigation 组件的背景色更改为使用当前主题的主色，并确保标签的颜色在该背景色之上清晰易读。

我目前的方法

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'rgba(217,102,102,1)'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: '#fff'
            }
        }
    }
});

此代码完成任务并将底部导航变为红色，将标签/图标变为白色。但是，我希望能够灵活地更改调色板中的主要颜色并相应地更新组件。

我想做什么

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'primary.main'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: 'primary.contrastText'
            }
        }
    }
});

通过这种方式，我可以轻松更新原色，而不必担心在我的覆盖范围内更改对它的每个引用。我意识到我可以将rgba值提取到 a 中const …

在Material-UI 中，有一个makeStyles函数可以用来获取自定义的 CSS-Styling。

如果我不在该特定 CSS 中使用主题，我应该使用它吗？

例如：

import React from "react";
import { TextField, Paper, Button, Box } from "@material-ui/core";

const classes = {
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
       marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
};

const Ohne = () => {
  console.log(classes);
  return (
      <Paper style={classes.paper}>
      <Box>
          <TextField style={classes.textField} />
          <Button style={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Ohne;

对象是：

{
    "paper": {
        "backgroundColor": "#eee", …

我正在使用 React 和 material-ui .. 我刚刚意识到当我尝试提交表单时，自动完成组件有一个警告，所以我尝试做一些非常基本的事情，就像在文档中一样：

let Form = props => {

  return(
        <form noValidate onSubmit={handleSubmit} >
            <Autocomplete
                id="combo-box-demo"
                options={[{id:1,name:"test"},{id:2, name:"test2"}]}
                getOptionLabel={(option) => option.name}
                style={{ width: 300 }}
                renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
            />

当我尝试提交表单时，出现以下错误：

Material-UI：提供给自动完成的值无效。没有一个选项与{"id":1,"name":"test"}. 您可以使用getOptionSelectedprop 来自定义相等性测试。

我也意识到，如果我在组件状态中设置选项，则没有警告（仅当它们像常量一样设置时）。所以我想知道你们中的一些人是否对这种行为有任何想法？非常感谢你。

Material-UI中Box和Grid的区别是什么

何时使用每个

我对此感到困惑